💨 Razorwind is a unified set of tools that make creating design systems a breeze.

[!IMPORTANT] This repository, and the apps, libraries, and tools contained within, is still in it's initial development phase. As a result, bugs and issues are expected with it's usage. When the main development phase completes, a proper release will be performed, the packages will be available through NPM (and other distributions), and this message will be removed. However, in the meantime, please feel free to report any issues you may come across.

Razorwind - Tailwind CSS Plugin

Razorwind - Tailwind CSS is a package that can create Tailwind CSS files from design tokens or read a Tailwind CSS file and return the design tokens.

Quick Features

• Write Tailwind CSS v4 @theme files from design tokens.
• Read tokens back from Tailwind files with the extract plugin.
• Prefix compiled utilities with prefix (theme declarations stay unprefixed).
• Toggle the Tailwind import with includeImport (default true).
• Emit ESLint and Stylelint guardrail plugins aligned with theme tokens.

Installing

Using pnpm:

pnpm add -D @razorwind/tailwindcss

npm install -D @razorwind/tailwindcss

yarn add -D @razorwind/tailwindcss

Usage

import { defineConfig } from "@razorwind/core";
import tailwindcss from "@razorwind/tailwindcss/generate";

export default defineConfig({
  plugins: [tailwindcss()]
});

Options

| Option | Default | Description | | ------------------ | ---------------- | ------------------------------------------------------------- | | cssPath | Detected entry | Output path for the generated Tailwind CSS file | | prefix | — | Prefix applied to compiled utility classes and CSS variables | | includeImport | true | Include @import "tailwindcss"; at the top of the file | | fontAssetBaseUrl | — | Absolute HTTP(S) base URL for generated font asset references | | installGuide | Generated steps | Override body for the generated INSTALL.md |

ESLint guardrails

@razorwind/tailwindcss/eslint is a second generator that emits an ESLint flat-config plugin aligned with the schema's Tailwind @theme tokens. Rules only turn on for token namespaces the schema defines, and their messages suggest the real token utilities.

import { defineConfig } from "@razorwind/core";
import tailwindcss from "@razorwind/tailwindcss/generate";
import tailwindcssEslint from "@razorwind/tailwindcss/eslint";

export default defineConfig({
  plugins: [tailwindcss(), tailwindcssEslint()]
});

// eslint.config.mjs
import guardrails from "./eslint/razorwind-guardrails.mjs";

export default [
  guardrails({
    files: ["src/**/*.{ts,tsx}"],
    severity: { "no-stock-palette": "error" }
  })
];

| Rule | Default (when enabled) | Flags | | ----------------------- | ---------------------- | ---------------------------------------------------------------------- | | no-color-literal | error | bg-[#fff], text-[oklch(…)] | | no-stock-palette | warn | bg-red-500 unless the schema defines color.red.500 | | no-unknown-theme-var | error | bg-(--color-x) / [var(--radius-x)] not defined by the schema | | no-radius-literal | error | rounded-[3px] | | no-spacing-literal | warn | p-[13px], -mt-[2rem] | | no-typography-literal | warn | text-[14px], font-[…], leading-[…], tracking-[…] | | no-shadow-literal | error | shadow-[…] | | no-dark-pairs | error | dark:bg-primary when tokens already carry a dark theme | | focus-visible | warn | focus:ring-* (use focus-visible:) |

Class lists are read from className / class attributes and from cn, clsx, cx, cva, classNames, twMerge, twJoin and tw (override with the attributes / callees options).

| Option | Default | Description | | --------------- | ----------------------------------------- | ---------------------------------------------------- | | eslintPath | "eslint/razorwind-guardrails.mjs" | Output path of the generated plugin module | | prefix | "design-system" | Rule namespace in flat config | | runtimeImport | "@razorwind/tailwindcss/eslint-runtime" | Module the generated file imports rules from | | installGuide | Generated | Override body for the generated INSTALL.md |

Stylelint guardrails

@razorwind/tailwindcss/stylelint emits the same guardrails as Stylelint plugins for stylesheets. The class rules read @apply preludes, and no-unknown-theme-var also reads var(), theme() and --theme() references in declarations and at-rule preludes. Rule ids, messages and default severities match the ESLint guardrails.

import { defineConfig } from "@razorwind/core";
import tailwindcss from "@razorwind/tailwindcss/generate";
import tailwindcssStylelint from "@razorwind/tailwindcss/stylelint";

export default defineConfig({
  plugins: [tailwindcss(), tailwindcssStylelint()]
});

// stylelint.config.mjs
import guardrails from "./stylelint/razorwind-guardrails.mjs";

const { plugins, rules } = guardrails({
  severity: { "no-stock-palette": "error" }
});

export default {
  plugins: [...plugins],
  rules: { ...rules }
};

.button {
  @apply bg-primary rounded-lg; /* ok */
  @apply bg-[#ff0000];          /* no-color-literal */
  color: var(--color-brnd);     /* no-unknown-theme-var */
}

Pass files to scope the rules to globs (they move into an overrides entry) and ignoreFiles to exempt files. @razorwind/stylelint bundles these rules as tailwind-* alongside its design-token rules.

| Option | Default | Description | | ---------------- | -------------------------------------------- | -------------------------------------------- | | stylelintPath | "stylelint/razorwind-guardrails.mjs" | Output path of the generated plugin module | | prefix | "design-system" | Rule namespace in stylelint.config.* | | runtimeImport | "@razorwind/tailwindcss/stylelint-runtime" | Module the generated file imports rules from | | installGuide | Generated | Override body for the generated INSTALL.md |

Development

Building

Run nx build tailwindcss to build the library.

Running unit tests

Run nx test tailwindcss to execute the unit tests via Vitest.

Storm Workspaces

Storm workspaces are built using Nx, a set of extensible dev tools for monorepos, which helps you develop like Google, Facebook, and Microsoft. Building on top of Nx, the Open System provides a set of tools and patterns that help you scale your monorepo to many teams while keeping the codebase maintainable.

Roadmap

See the open issues for a list of proposed features (and known issues).

• Top Feature Requests (Add your votes using the 👍 reaction)
• Top Bugs (Add your votes using the 👍 reaction)
• Newest Bugs

Support

Reach out to the maintainer at one of the following places:

• Contact
• GitHub discussions
• [email protected]

License

This project is licensed under the Apache License 2.0. Feel free to edit and distribute this template as you like.

See LICENSE for more information.

Changelog

This project adheres to Semantic Versioning. Every release, along with the migration instructions, is documented in the CHANGELOG file

Contributing

First off, thanks for taking the time to contribute! Contributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make will benefit everybody else and are greatly appreciated.

Please try to create bug reports that are:

• Reproducible. Include steps to reproduce the problem.
• Specific. Include as much detail as possible: which version, what environment, etc.
• Unique. Do not duplicate existing opened issues.
• Scoped to a Single Bug. One bug per report.

Please adhere to this project's code of conduct.

You can use markdownlint-cli to check for common markdown style inconsistency.

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Storm Software is an open source software development organization and creator of Acidic, StormStack and StormCloud.

Our mission is to make software development more accessible. Our ideal future is one where anyone can create software without years of prior development experience serving as a barrier to entry. We hope to achieve this via LLMs, Generative AI, and intuitive, high-level data modeling/programming languages.

Join us on Discord to chat with the team, receive release notifications, ask questions, and get involved.

If this sounds interesting, and you would like to help us in creating the next generation of development tools, please reach out on our website or join our Slack channel!