Skip to content

Latest commit

 

History

History
104 lines (76 loc) · 3.88 KB

README.md

File metadata and controls

104 lines (76 loc) · 3.88 KB
Raw

flutter_tailwindcss

Experience tailwind writing flutter patterns.

Introduction

中文 | English

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>

Two ways to use it

First, through 'TwText'

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

The second way is to use the native 'Text' with the 'className' method extension from 'TextStyle'

Text(
  'The quick brown fox jumps over the lazy dog.',
  style: const TextStyle().className([
    TwFont().sans,
    TwFont().text.lg,
    TwFont().medium,
    TwFont().slate.shade900
  ]),
);

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

Available Properties

Properties Usage Tailwind
Font Family TwFont().{family} font-family
Font Size TwFont().text.{size} font-size
Font Style TwFont().{style} font-style
Font Weight TwFont().{weight} font-weight
Letter Spacing TwFont().tracking.{spacing} letter-spacing
Line Height TwFont().leading.{height} line-height
Text Color TwFont().text.{color} text-color
Text Decoration TwFont().{decoration}, decoraiton.{colot}, decoraiton.{style}, decoraiton.{thickness} text-decoration

Demo in the project