Dart package exposing Tailwind Colors to be used in flutter in a way similar to the Material colors.
- Add to your
pubspec.yaml
file:
dependencies:
tailwind_colors: ^0.3.1
- Get the package via your IDE or via the command line by typing:
$ pub get
- Import the
tailwind_colors
package
import 'package:tailwind_colors/tailwind_colors.dart';
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:
- The palette can be found on the TailwindCSS website
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,
)),
);
- Create a parser for tailwind configuration files. You can find a helpful script from albemala in the scripts folder.
- Make it possible to use the color swatch as is. (Like in ThemeData)