flutter_tailwindcss

Experience tailwind writing flutter patterns.

Introduction

How to use

dependencies:
  flutter_vant_kit: ^0.0.4

Planing

doing	name	verison
🚀 done	`TwColor`	`0.0.2`
🚀 done	`Spacing`	`0.0.3`
👷 doing	`TwText`	-
👷 doing	`TwFont`	-
⏳ planing	`BorderRadius`	-
⏳ planing	`BorderWidth`	-
⏳ planing	`Divide`	-
⏳ planing	`Shadow`	-

I think so much for the moment, and I will modify it according to the actual situation later.

Example

colors

spacing

TwText

'TwText' is used in combination with 'TwFont'. TwText is the equivalent of Text in flutter but with an extra 'className' parameter.

** Look at the difference with 'tailwind' **

<p class="font-sans text-lg font-medium text-slate-900">
  The quick brown fox jumps over the lazy dog.
</p>

TwText(
    'The quick brown fox jumps over the lazy dog.', className: [
    /// 文字等宽
    TwFont().sans,
    /// 文字大小 + 行高
    TwFont().text.lg,
    /// 文字颜色
    TwFont().slate.shade900,
    /// 加粗
    TwFont().medium
])

Because TwFont is a class, you don't need to install plug-ins to do this