Skip to content

joshmossas/tailwind-to-dart

Repository files navigation

Tailwind to Dart

This library transforms a Tailwind config into dart code that you can use in your Flutter apps. This allow you to reuse the same colors, spacing, and font sizes without having to duplicate code.

Supported Tailwind properties:

  • Colors
  • Spacing
  • Font Sizes
  • Line Heights
  • Letter Spacing
  • Border Radius
  • Border Width
  • Opacity

Supported value types

  • Hex colors
  • RGB colors
  • RGBA colors
  • numbers
  • px
  • em
  • rem

CLI Usage

npx tailwind-to-dart --config <path-to-tailwind-config> --output <path-to-output-file>
npm i -g tailwind-to-dart

tailwind-to-dart --config <path-to-tailwind-config> --output <path-to-output-file>

Options

flag type description
--config string path to your tailwind.config.js
--output string path to the desired output location
--format boolean automatically run "dart format" on the generated file
--remSize string the desired base font-size. (Default is 16)

Typescript/Javascript Usage

All of the core functionality is exposed as Typescript functions

import fs from "node:fs";
import {
    getResolvedTailwindConfig,
    tailwindConfigToDartString,
} from "tailwind-to-dart";

async function main() {
    const config = await getResolvedTailwindConfig("./tailwind.config.js");
    if (!config.success) {
        throw new Error("Error loading config");
    }
    const dartStr = tailwindConfigToDartString(config.data, {
        // options
    });
    fs.writeFileSync("my_dart_file.dart", dartStr);
}

main();