tailwind_colors 0.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 71

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:
    tailwind_colors: any
  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 which can be accessed similarly:

    Color myTailwindUIColor = TWUIColors.cool_gray.shade50;

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

  • The cool_gray color
  • An additional shade50 shade


  • [ ] Create a parser for tailwind configuration files. Placeholder code can be found here
  • [ ] Show colors in the IDE tooltip
  • [ ] Make it possible to use the color swatch as is. (Like in ThemeData)

[0.1.0] - Chores #

  • Adds an example -> See example/lib/main.dart for an usage example.
  • Longer description to fit with the pub guidelines
  • Version up to 0.1.0: API should not be subject to change but might be extended in the future.

[0.0.1] - Initial Release. #

  • Initial Release


import 'package:flutter/material.dart';
import 'package:tailwind_colors/tailwind_colors.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      home: MyHomePage(title: 'Flutter Demo Home Page'),

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: TWUIColors.cool_gray.shade600,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
              'You have pushed the button this many times:',
              style: Theme.of(context).textTheme.display1,
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
        backgroundColor: TWColors.purple.shade700,

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  tailwind_colors: ^0.1.0

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:tailwind_colors/tailwind_colors.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on May 30, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies