Introduction

A simple yet awesome flutter package to generate and use TailwindCSS-like styling in your flutter projects.

This package is mainly focused on the UI part of any app, As it provides easy-to-use methods and Widgets to use in your apps.

Inspiration

• TailwindCSS
• VelocityX

Who it is for?

This package is for those developers who wants to build their flutter apps faster but with less code. Because flutter developers know that creating even a simple section in their app requires a substantial amount of code. To mitigate this, I present the benefits of incorporating Tailwind CSS styles in your Flutter projects. With Tailwind, you can create stunning and functional UI in a fraction of the time it typically takes.

Why use Tailwind CLI?

Build apps faster and with less code. This library helps you write UI code quickly and easily. You can avoid long and repetitive code and reduce the amount of code you write by up to 80%, while still getting the same result.

Here is a comparison between the normal way of building a container that looks like a button and the Tailwind CLI way of doing the same thing.

Making a custom button

Normal Way

InkWell(
  onTap: () {
    // Do nothing for now!
  },
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          color: Theme.of(context).primaryColor,
        ),
        padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
        child: Text(
          "Simple custom button",
          style: TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w600,
            height: 1,
            color: Colors.white,
          ),
        ),
      ),
    ],
  ),
),

The tailwind way:

Easiest Method

TwRow([
  "Tailwind custom button".isText
  .textSm
  .semiBold
  .white
  .leadingNormal
  .render() /// Text ends here
  .isContainer /// Container starts here
  .px4
  .py2
  .roundedLg
  .primaryColor(context)
  .render() /// Container ends here
])
.justifyCenter
.min
.render() /// Row ends here
.onTap(() => print("Do nothing for now!")), /// Wraps with `InkWell` widget and add `onTap` method

There are multiple ways to do the same thing with tailwind styles which can be helpful for any developer.

This is just a highlight of this package there is a lot more which can be done with this package Please check each section for the different widgets and methods that are available.