tailwind_cli 0.7.2

A simple yet best tailwind style generation cli tool for flutter projects.

Tailwind CLI v0.7.2

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

Inspiration

• Tailwind CSS
• VelocityX

Some Highlights

This will provide basic styling just like Tailwind provides in which it is providing you Colors, Gradient Colors, Sizing (Padding, Margins), Roundness, Shadows, Font Sizes, Font styling Etc.

Want to dive in?

Know more about the package by visiting this Official Documentation

Future Plans

Feature	Status	Addition/Changes	From Version
TwImage Widget	✔️	➕	0.7.0
TwGrid Widget	⏳	➕	In Progress
TwPositioned Widget	⏳	➕	In Progress

---

Support me

If you found this package helpful, you can just simply click on the following button below and donate some amount to help me work on these projects frequently.

---

Getting Started

Please check our Official Documentation for instructions on how to use this package in your Flutter apps.

Go to: Official Documentation

Features

As every Flutter developer knows that each Flutter application requires a lot of code to be written to achieve the best UI. I saw this issue and searched for a way that can help us reduce the number of lines of code but get the same result as expected. I was aware of the UI libraries for web development in which one of the best is tailwindcss but it is only available for HTML and CSS which is really awesome and provides a great way to write clean and effective code for your application's UI. I searched for the same which can be used in Flutter but found nothing which is similar to tailwindcss. I know there is one package called VelocityX which does the same thing but there are some major differences between TailwindCLI and VelocityX. Read more...

So I thought why I can't make this feature with mainly focusing on the UI in our flutter projects? For this, I created this project and thankfully it worked.

What makes TailwindCLI better choice for Styling

The main porpose of this package is to provide you a better experience while building your flutter apps and also allow you to customize the default styling that this package provides, so you can easily create your own design system according to your app's need. And as i mentioned above about the VelocityX package if it was there then why we needed a new package you may ask? So let me clear your concern. As you can check that VelocityX project is not only focusing on the UI styling they are also providing some other features like: State Management, Routing etc. And most of the people wont use all the features from this package as they can use Block or Provider or any other library for State Management and GetX for Routing. And also TailwindCLI is providing customization option which VelocityX don't have. I am not saying that VelocityX is not a good solution it is indeed a great library that i used a long time ago but it was lacking some features that lead me to create my own library.

Highlights

Performance	Writing code
100% performance	2x your code writing speed as it reduces code length
No heavy library	Write less produce more
Lightweight	Increase your productivity by 200%

Widgets

• This project generates some widgets that can be used with tailwind-like styles.
• You can also use other native widgets which can be converted to Tailwind Widgets and inherit the tailwind styles.
• Few example widgets:
  • TwButton to create a button.
  • TwColumn is a wrapper around a column widget.
  • TwContainer Flutter container widget with the goodness of tailwind styles.
  • TwPadding Now adding padding is so simple.
  • TwRow Create rows with ease.
  • TwStack Manage stack widget with extension methods.
  • TwText now working with text widgets is so simple with TailwindCLI.
  • See more

Methods

There are several methods that can be used to build tailwind-like styles for any widget found in the flutter.

• Paddings: Adding padding is not an easy task for the Flutter projects as it requires a lot of code to be written for simple padding.
  • But with this library, you can add padding with just a few characters.
• Margins: Same applies to the margins.
• Text Colors: We have a great palette of colors that can be used for any text widget with few characters of code.
  • For example Text("Flutter is awesome").isText.red500.render().
  • See that we only need to call the color name to set the color for the text widget.
• Background Colors: Same color palette can be used for a background color for any widget with few code characters.
  • For example Container(height: 500, width: 500).isContainer.red500.render().
  • See that we only need to call the color name to set the background color for the container widget.
• See more

Detailed documentation

You can check the official documentation by visiting this URL: Visit Official Documentation

Note: This documentation is in the initial stage which will be fully available soon.

Contribution

Your contribution is always welcome and will be appreciated.

Follow this guideline to contribute: Contribution Guidelines