tailwind 0.0.6

Inspired from TailwindCSS. It is a simple Tailwind utility library for Flutter, enabling quick and efficient UI building with utility-first classes, making it easier to create beautiful designs.

Inspired from TailwindCSS. It is a simple Tailwind utility library for Flutter, enabling quick and efficient UI building with utility-first classes, making it easier to create beautiful designs.

Features

• ✅

  Color

• ✅

  Inset // Use as Padding/Margin value

• ✅

  Space // Use as SizedBox between widgets widgets

• ✅

  Space between elements of List

• ❌

  Size

• ❌

  Typography

• ❌

  Border

  ...more

List will be updated as this package progresses.

Installation

dart pub add tailwind

Usage

Colors

Tw.colors.cyan.shade500 // *-cyan-500
Tw.colors.purple.shade400 // *-purple-400

// Custom value
Tw.colors.color(0xffbada55) // Same as Color(0xffbada55)

Insets (Padding/Margin)

Tw.insets.i4 // 16px all sides
Tw.insets.i4.x // 16px horizontal
Tw.insets.i4.y // 16px vertical
Tw.insets.i4.t // 16px top
Tw.insets.i4.b // 16px bottom
Tw.insets.i4.l // 16px left
Tw.insets.i4.r // 16px right

// Custom value
Tw.insets.inset(0.5).r // 0.5px right

Space (Gap between widgets in Row/Column)

Tw.spaces.s4 // 16px space

// Custom value
Tw.spaces.space(0.5) // 0.5px space

// Space between children of Row/Column or any List<Widget>
Row(
    mainAxisSize: MainAxisSize.min,
    children: [
        Card(),
        Card(),
        Card(),
    ].space(Tw.spaces.s4), // Gap between children
),

Additional information

This package is inspired from TailwindCSS