flutter_tailwind_colors

Tailwind CSS Colors for Flutter - Supporting All Tailwind CSS Versions

Dart package exposing Tailwind Colors to be used in Flutter in a way similar to the Material colors. Supports multiple Tailwind CSS versions with easy version switching.

Supported Versions

• Tailwind CSS v2.0 ✅
• Tailwind CSS v3.0 ✅
• Tailwind CSS v3.1 ✅
• Tailwind CSS v3.2 ✅
• Tailwind CSS v3.3 ✅
• Tailwind CSS v3.4 ✅
• Tailwind CSS v4.0 ✅ (default)

All Tailwind CSS versions are now fully supported! You can switch between any version using TWColors.setVersion().

Installation

1. Add to your pubspec.yaml file:

dependencies:
    flutter_tailwind_colors: ^0.0.5

2. Get the package via your IDE or via the command line by typing:

$ flutter pub get

3. Import the flutter_tailwind_colors package

import 'package:flutter_tailwind_colors/flutter_tailwind_colors.dart';

How to Use

Default Usage (v4.0)

Tailwind Colors can be created and used in the same way as the usual Material color palette.

// TWColors has shades starting from 50 up to 950 in increment of 50 or 100
Color primaryColor = TWColors.emerald.shade50;
Color secondColor = TWColors.rose.shade950;

Version Switching

You can switch between different Tailwind CSS versions. Version switching is global - setting a version affects all color access throughout your entire application:

import 'package:flutter_tailwind_colors/flutter_tailwind_colors.dart';

// Use default (v4.0)
Color defaultColor = TWColors.blue.shade500;

// Switch to a different version (affects ALL color access globally)
TWColors.setVersion(TailwindVersion.v3_4);
Color v34Color = TWColors.blue.shade500; // Now uses v3.4
Color anotherColor = TWColors.emerald.shade400; // Also uses v3.4

// Check current version
print(TWColors.version); // TailwindVersion.v3_4

// Switch back to latest (v4.0) - affects all subsequent color access
TWColors.setVersion(TailwindVersion.latest);

Important: Since version switching is global, it's recommended to set the version once in your app initialization (e.g., in main() or MaterialApp setup) rather than switching it frequently.

Available Colors

TWColors features all standard Tailwind CSS colors:

• slate
• gray
• zinc
• neutral
• stone
• red
• orange
• amber
• yellow
• lime
• green
• emerald
• teal
• cyan
• sky
• blue
• indigo
• violet
• purple
• fuchsia
• pink
• rose

Each color has shades from 50 to 950 (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950).

The color palette matches the TailwindCSS official colors.

Use as a Theme

Every color from the TWColors palettes can be used in your Flutter theme:

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: TWColors.emerald,
    colorScheme: ColorScheme.fromSeed(
      seedColor: TWColors.emerald.shade500,
    ),
  ),
  home: MyHomePage(
    title: 'Flutter Demo Home Page',
  ),
);

Notes

• By default, the package uses Tailwind CSS v4.0 colors
• Version switching is global - calling TWColors.setVersion() affects ALL color access throughout your entire application, across all files and widgets
• It's recommended to set the version once during app initialization (e.g., in main())
• All Tailwind CSS versions (v2.0 through v4.0) are fully supported
• v2.0 uses different color names (blueGray, coolGray, trueGray, warmGray, lightBlue) but these are mapped to the v3+ names for compatibility
• The package maintains backwards compatibility - existing code will continue to work