.gif)
Description:
tailwind colors
tailwind_colors #
Dart package exposing Tailwind Colors to be used in flutter in a way similar to the Material colors.
Installation #
Add to your pubspec.yaml file:
dependencies:
tailwind_colors: ^0.3.1
copied to clipboard
Get the package via your IDE or via the command line by typing:
$ pub get
copied to clipboard
Import the tailwind_colors package
import 'package:tailwind_colors/tailwind_colors.dart';
copied to clipboard
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;
copied to clipboard
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;
copied to clipboard
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
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,
)),
);
copied to clipboard
TODO #
❌ 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)
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files:
Customer Reviews
There are no reviews.
