flutter_tailwindcss

Experience tailwind writing flutter patterns.

Introduction

中文 | English

How to use

dependencies:
  flutter_vant_kit: ^0.0.4

Planing

doingnameverison
🚀 doneTwColor0.0.2
🚀 doneSpacing0.0.3
👷 doingTwText-
👷 doingTwFont-
⏳ planingBorderRadius-
⏳ planingBorderWidth-
⏳ planingDivide-
⏳ planingShadow-

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

Demo in the project

Libraries

color
colors
create_tw_colors
create_tw_spacing
default
family
flutter_tailwindcss
index
size
style
template
tw_colors
tw_spacing
weight