tailwind_colors 0.3.1 icon indicating copy to clipboard operation
tailwind_colors: ^0.3.1 copied to clipboard

Easily use the TailwindCSS color palette in dart. Features both the first TailwindCSS, the TailwindCSS 2.0 and the TailwindUI color palettes.

tailwind_colors #

Dart package exposing Tailwind Colors to be used in flutter in a way similar to the Material colors.

Installation #

  1. Add to your pubspec.yaml file:
dependencies:
    tailwind_colors: ^0.3.1
  1. Get the package via your IDE or via the command line by typing:
$ pub get
  1. Import the tailwind_colors package
import 'package:tailwind_colors/tailwind_colors.dart';

How to Use #

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

    // TWColors has shades starting from 100 up to 900 in increment of 100
    Color myColor = TWColors.gray.shade100;
    Color mySecondColor = TWColors.blue.shade900;

TWColors features:

  • gray
  • red
  • orange
  • yellow
  • green
  • teal
  • blue
  • indigo
  • purple
  • pink

This package also features the TailwindUI color palette as well as the Tailwind 2.0 palette which can both be accessed similarly:

    Color myTailwindUIColor = TWUIColors.cool_gray.shade50;
    Color myTailwindTwoColor = TWTwoColors.fuchsia.shade50;

TWUIColors features all the TailwindUI counterparts to the normal Tailwind colors with the addition of:

  • The cool_gray color
  • An additional shade50 shade

TWTwoColors features the Tailwind 2.0 color palette:

Use as a theme #

Every colors from the TWTwoColors and the TWUIColors palettes can be used.

return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: TWTwoColors.fuschia.asMaterialColor,
      ),
      home: MyHomePage(
          title: 'Flutter Demo Home Page',
          onPress: () => setNewSwatch(
                TWTwoColors.teal.asMaterialColor,
              )),
    );

TODO #

  • [ ] Create a parser for tailwind configuration files. You can find a helpful script from albemala in the scripts folder.
  • [X] Make it possible to use the color swatch as is. (Like in ThemeData)
9
likes
130
pub points
73%
popularity

Publisher

unverified uploader

Easily use the TailwindCSS color palette in dart. Features both the first TailwindCSS, the TailwindCSS 2.0 and the TailwindUI color palettes.

Homepage

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on tailwind_colors