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();