Installation

Installation and setup of this the package is as easy as you setup other packages.

Install package

flutter pub add -d tailwind_cli

OR

dart pub add -d tailwind_cli

Or mannually

dev_dependencies:
  #...
  tailwind_cli: ^0.7.5 // [!code ++]

And then install the libraries with

flutter pub get

Publish the config file

Now publish the tailwind.config.json file

flutter pub run tailwind_cli:init

or

dart run tailwind_cli:init

Publishing the tailwind.config.json file will create a config file for Tailwind styles.

tailwind.config.json

{
  "darkMode": true,
  "colors": {},
  "spacers": {},
  "fontSizes": {},
  "opacity": {}
}

Build tailwind styles

flutter pub run tailwind_cli:build

or

dart run tailwind_cli:build

This commend will generate whole tailwind project into your prject's root directory.

Gererated directory structure.

Tailwind project's directory structure

📂 tailwind
├── 📂 lib
│   ├── 📂 extensions
│   │   ├── 📄 TwColorExtension.dart
│   │   ├── 📄 TwContextExtension.dart
│   │   ├── 📄 TwNumbersExtension.dart
│   │   └── 📄 TwWidgetExtension.dart
│   ├── 📂 mixins
│   │   ├── 📄 TwAlignmentMixin.dart
│   │   ├── 📄 TwBorderMixin.dart
│   │   ├── 📄 TwColorMixin.dart
│   │   ├── 📄 TwGestureMixin.dart
│   │   ├── 📄 TwGradientMixin.dart
│   │   ├── 📄 TwMarginMixin.dart
│   │   ├── 📄 TwPaddingMixin.dart
│   │   ├── 📄 TwRoundnessMixin.dart
│   │   ├── 📄 TwShoadowMixin.dart
│   │   └── 📄 TwSizeMixin.dart
│   ├── 📂 utilities
│   │   ├── 📄 TwColors.dart
│   │   ├── 📄 TwService.dart
│   │   ├── 📄 TwSizes.dart
│   │   └── 📄 TwUtils.dart
│   ├── 📂 widgets
│   │   ├── 📄 TwAppBuilder.dart
│   │   ├── 📄 TwBuilder.dart
│   │   ├── 📄 TwButton.dart
│   │   ├── 📄 TwColumn.dart
│   │   ├── 📄 TwContainer.dart
│   │   ├── 📄 TwImage.dart
│   │   ├── 📄 TwInkwell.dart
│   │   ├── 📄 TwPadding.dart
│   │   ├── 📄 TwRow.dart
│   │   ├── 📄 TwStack.dart
│   │   ├── 📄 TwText.dart
│   │   └── 📄 TwWrap.dart
│   └── 📄 tailwind.dart
├── 📄 pubspec.lock
└── 📄 pubspec.yaml

Add tailwind to your project

Include tailwind in your project's pubspec.yaml file under dependencies section

pubspec.yaml

dependencies:
  # Tailwind
  tailwind: 
    path: tailwind // [!code ++]

Install tailwind in your project

flutter pub get

Configure your app to use tailwind

Initialize TwService

Go to your main.dart file and initialize TwService in your main() method:

void main() async { // Added async
  await TwService.init(); 
  runApp(const MyApp());
}

Note: TwService.init() is an asynchronous method so you need to make main method as async

Configure MaterialApp

Now you will need to add TwAppKey into your MaterialApp to do so:

return MaterialApp(
  key: TwService.appKey, 
  //... Other properties
);

Or if you are using GetX package and GetMaterialApp

return GetMaterialApp(
  key: TwService.appKey, 
  //... Other properties
);

Add TwAppBuilder (Optional)

If you want to take benefit of the TwApp reactivity on theme mode change you should add TwAppBuilder into your app.

To do so wrap your MaterialApp with TwAppBuilder:

TwAppBuilder(
  builder: (BuildContext context, ThemeMode themeMode) {
    return MaterialApp(
    key: TwService.appKey,
    themeMode: themeMode, // [!code ++] // To add dynamic theme
    //... Other properties
    );
  }
);

Made any changes?

Make sure to re-build tailwind styles if you have made any changes in the config file.

To do so run this command:

flutter pub run tailwind_cli:build

or

dart run tailwind_cli:build

This command will generate whole tailwind styles and widgets with the new configuration that you added in the tailwind.config.json file.