TailwindCSS config

Learn how to generate TailwindCSS config files from your Figma styles and Figma variables with Zeytal CLI.

Generate and import Tailwind code

To generate TailwindCSS config files from your Figma styles and Figma variables, you will need to explicitly tell the CLI to generate these files like so:

Copy to clipboard
{
  "styles": {
    "formats": {
      "targets": ["tw"]
    }
  },
  "variables": {
    "formats": {
      "targets": ["tw"]
    }
  }
}

Now, when using the zeytal styles and zeytal variables CLI commands, the CLI will output two TailwindCSS config files named styles-tw.css and variables-tw.css.

All you need to do is tell TailwindCSS to use them like so:

Copy to clipboard
@import "tailwindcss";
@import "../.zeytal/variables/variables-tw.css";
@import "../.zeytal/styles/styles-tw.css";

Next step: we need to tell TailwindCSS how to map your variables and styles to TailwindCSS theme variables so you don’t have to map them by hand.

The settings that follow will help you do that easily.

Settings processing order

Within your config files, you will be able to tweak the tailwind object’s default settings.

Most of those settings are conceptually alike but simply applied to different parts of the generated styles-tw.css and variables-tw.css TailwindCSS config files.

Those concepts are:

• Moding: separating styles and variables in modes
• Ignoring: ignoring styles and variables based on their names
• Stripping: removing parts of targeted styles and variables
• Rewriting: rewriting parts of targeted styles and variables
• Mapping: mapping targeted styles and variables to TailwindCSS theme namespaces

The generation process applies your settings specifically in the following order:

1. globalIgnoreTokenNames
2. globalModes
3. globalRewriteModes
4. globalStripTokenNames
5. globalRewriteTokenNames
6. namespaces.[spaceName].tokensMapping
7. namespaces.[spaceName].stripTokenNames
8. namespaces.[spaceName].rewriteTokenNames
9. tokensPrefix

Knowing the processing order will help you target your Figma styles and Figma variables more accurately.

Available settings

With your config files, you can override the following tailwind settings:

• tailwind.tokensPrefix
• tailwind.globalRootToTheme
• tailwind.globalModes
• tailwind.globalRewriteModes
• tailwind.globalIgnoreTokenNames
• tailwind.globalStripTokenNames
• tailwind.globalRewriteTokenNames
• tailwind.namespaces

To configure and override the default behavior of the CLI commands, we recommend you create a zeytal.json file in your project’s root directory.

To learn about the basics of Zeytal’s config files, see the CLI config files docs.

Tokens prefix

Type: string

Default value: ""

If set, all the generated Figma styles and Figma variables will start with the chosen tokensPrefix value.

Copy to clipboard
{
  "tailwind": {
    "tokensPrefix": "ds-"
  }
}

With the above value, all the Figma styles and Figma variables generated in your TailwindCSS config file will be prefixed with ds-.

For example, your variables-tw.css file will look like this:

Global root to theme

Type: Array<string>

Default value: []

Move matching Figma styles and Figma variables from the generated CSS :root scope to TailwindCSS @theme directive.

Copy to clipboard
{
  "tailwind": {
    "globalRootToTheme": ["^var-outlines-", "^style-gradient-"]
  }
}

Global modes

Type: Array<Array<string>>

Default value: []

The CLI can generate TailwindCSS config files that handle modes, just like your Figma variables do.

For example, this setting will help you handle light and dark modes for your color variables.

Copy to clipboard
{
  "tailwind": {
    "globalModes": [["-light", "-dark"]]
  }
}

Now, let’s illustrate how to set up the globalModes setting from Figma to your code.

With the globalModes setting, you can tell the CLI which collection of variables you want to activate modes for based on their names. Then, the CLI will generate scoped CSS variable declarations to automatically handle the modes for you.

Let’s use an example. Imagine that you declared a variable collection using Light and Dark as variable modes like so:

The CLI will generate variables named like this by default:

• --colors-blue-100-light
• --colors-blue-200-light
• …
• --colors-blue-100-dark
• --colors-blue-200-dark
• … And so on…

With a globalModes setting set to match -light and -dark, the CLI will remove the variables suffixes and generate three things instead:

1. CSS variables for the light values in a .light CSS class.
2. CSS variables for the dark values in a .dark CSS class.
3. TailwindCSS theme variables to tell TailwindCSS to use the corresponding CSS variables.

Said differently, whenever a Figma variable collection uses variable modes, the variables generated by zeytal are first suffixed with their mode name, then moved to their specific mode scope.

Let’s take the example of an Ocean Blue variable with Light and Dark modes in Figma.

1. First, it becomes --ocean-blue-light and --ocean-blue-dark through variables generation.
2. Then, specifically for your Tailwind config, a .light and a .dark CSS class are created.
3. --ocean-blue-light and --ocean-blue-dark are moved to .light and .dark and then stripped out of their -light and -dark suffix.
4. A --color-ocean-blue: var(--ocean-blue); line is created in the @theme inline directive.

Your final tailwind config file will look like this:

Copy to clipboard
.light {
  --ocean-blue: #0077b6;
}

.dark {
  --ocean-blue: #00b4d8;
}

@theme inline {
  --color-ocean-blue: var(--ocean-blue);
}

Global rewrite modes

Type: Array<Array<string>>

Default value: []

If set, the generated Figma modes defined through the globalModes setting will be replaced by your globalRewriteModes corresponding values.

For example, the generated .light and .dark CSS classes can be replaced by .theme-light and .theme-dark like so:

Copy to clipboard
{
  "tailwind": {
    "globalModes": [["-light", "-dark"]],
    "globalRewriteModes": [["theme-light", "theme-dark"]]
  }
}

Global ignore token names

Type: Array<string>

Default value: []

If set, Figma styles and variables matching your globalIgnoreTokenNames values will be ignored and thus not generated within your styles-tw.css and variables-tw.css files.

Copy to clipboard
{
  "tailwind": {
    "globalIgnoreTokenNames": ["responsive-grid-sizes-", "fluid-typo.*view-(768x|1408x)$"]
  }
}

In the example above, all the Figma styles and variables matching the two RegExp string patterns won’t be generated.

Global strip token names

Type: Array<string>

Default value: []

If set, the parts in the names of your Figma styles and variables matching your globalStripTokenNames values will be removed.

This setting will help you clean your Figma style and variable names so they’re less verbose when using them with TailwindCSS.

Copy to clipboard
{
  "tailwind": {
    "globalStripTokenNames": ["borders-collection-", "outlines-collection-"]
  }
}

In the example above, all the Figma styles and variables matching the two RegExp string patterns will be stripped of the matching parts.

E.g., a generated CSS variable named --borders-collection-border-3x: 3px; will become --border-3x: 3px;.

Global rewrite token names

Type: Record<string, string>

Default value: {}

If set, the parts in the names of your Figma styles and variables matching your globalRewriteTokenNames keys will be replaced by their globalRewriteTokenNames corresponding values.

This setting will help you clean your Figma style and variable names so they’re less verbose when using them with TailwindCSS.

Copy to clipboard
{
  "tailwind": {
    "globalRewriteTokenNames": {
      "-negative$": "-neg",
      "outline-width-": "outline-"
    }
  }
}

In the example above, all the Figma styles and variables matching the two RegExp string patterns in the object’s keys will be replaced by their respective string values.

E.g., a generated CSS variable named --space-16x-negative: -16px; will become --space-16x-neg: -16px;.

Namespaces

The namespaces config object will help you map your Figma styles and Figma variables to TailwindCSS theme variables.

Each namespace in this config object relates to a TailwindCSS theme namespace.

Here’s a shortcut to TailwindCSS’s docs about the default theme variable reference in TailwindCSS v4.

In each one of the config’s namespaces, you will be able to:

1. map styles and variables to the namespace
2. strip unwanted parts from your style names and variable names
3. rewrite parts of your style names and variable names

Namespaces list

The available namespaces are the following:

Copy to clipboard
{
  "tailwind": {
    "namespaces": {
      "fontFamily": {},
      "fontSize": {},
      "fontWeight": {},
      "letterSpacing": {},
      "lineHeight": {},
      "color": {},
      "spacing": {},
      "breakpoint": {},
      "container": {},
      "radius": {},
      "shadow": {},
      "insetShadow": {},
      "dropShadow": {},
      "blur": {},
      "perspective": {},
      "aspect": {},
      "ease": {},
      "animate": {}
    }
  }
}

Tokens mapping

Type: Array<string>

Default value: []

To map Figma styles and variables to a namespace, you will need to use the tokensMapping property of the desired namespace object.

In it you will need to pass RegExp string patterns that match your style and variable names.

Copy to clipboard
{
  "tailwind": {
    "namespaces": {
      "color": {
        "tokensMapping": ["colors-"]
      }
    }
  }
}

In the example above, all the Figma styles and variables matching the string patterns will be added to TailwindCSS’s color namespace like this:

Strip token names

Type: Array<string>

Default value: []

If set, the parts in the names of your Figma styles and variables matching your tokensMapping and stripTokenNames values will be removed.

This setting will help you clean your Figma style and variable names so they’re less verbose when using them with TailwindCSS.

Copy to clipboard
{
  "tailwind": {
    "namespaces": {
      "color": {
        "tokensMapping": ["colors-"],
        "stripTokenNames": ["colors-"]
      }
    }
  }
}

In the example above, all the Figma styles and variables matching the RegExp string patterns will be will be stripped of the matching parts like this:

Rewrite token names

Type: Record<string, string>

Default value: {}

If set, the parts in the names of your Figma styles and variables matching your tokensMapping values and rewriteTokenNames keys will be replaced by their rewriteTokenNames corresponding values.

This setting will help you clean your Figma style and variable names so they’re less verbose when using them with TailwindCSS.

Copy to clipboard
{
  "tailwind": {
    "namespaces": {
      "color": {
        "tokensMapping": ["colors-"],
        "rewriteTokenNames": {
          "colors-": "color-",
          "color-background-": "color-bg-"
        }
      }
    }
  }
}

In the example above, all the Figma styles and variables matching the RegExp string patterns in the object’s keys will be replaced by their respective string values like this:

Code example

A complete code example is available in the code examples section of our docs.

Config defaults

Copy to clipboard
{
  "tailwind": {
    "tokensPrefix": "",
    "globalModes": [],
    "globalIgnoreTokenNames": [],
    "globalStripTokenNames": [],
    "globalRewriteTokenNames": {},
    "namespaces": {
      "fontFamily": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "fontSize": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "fontWeight": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "letterSpacing": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "lineHeight": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "color": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "spacing": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "breakpoint": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "container": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "radius": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "shadow": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "insetShadow": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "dropShadow": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "blur": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "perspective": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "aspect": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "ease": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      },
      "animate": {
        "tokensMapping": [],
        "stripTokenNames": [],
        "rewriteTokenNames": {}
      }
    }
  }
}