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:

zeytal.json

1
{
2
  "styles": {
3
    "formats": {
4
      "targets": ["tw"]
5
    }
6
  },
7
  "variables": {
8
    "formats": {
9
      "targets": ["tw"]
10
    }
11
  }
12
}

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:

styles/globals.css

1
@import "tailwindcss";
2
@import "../.zeytal/variables/variables-tw.css";
3
@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. globalStripTokenNames
  4. globalRewriteTokenNames
  5. namespaces.[spaceName].tokensMapping
  6. namespaces.[spaceName].stripTokenNames
  7. namespaces.[spaceName].rewriteTokenNames
  8. 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:

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.

zeytal.json

1
{
2
  "tailwind": {
3
    "tokensPrefix": "ds-"
4
  }
5
}

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:

Figma variables collection with light and dark modes

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.

zeytal.json

1
{
2
  "tailwind": {
3
    "globalModes": [["-light", "-dark"]]
4
  }
5
}

Whenever a Figma variable collection uses variable modes, the generated variables are suffixed with their mode name.


The Ocean Blue variable with Light and Dark modes in Figma becomes --ocean-blue-light and --ocean-blue-dark once generated.

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:

Figma variables collection with light and dark modes

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.

Generated TailwindCSS CSS variables with light and dark modes

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.

zeytal.json

1
{
2
  "tailwind": {
3
    "globalIgnoreTokenNames": [
4
      "responsive-grid-sizes-",
5
      "fluid-typo.*view-(768x|1408x)$"
6
    ]
7
  }
8
}

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.

zeytal.json

1
{
2
  "tailwind": {
3
    "globalStripTokenNames": ["borders-collection-", "outlines-collection-"]
4
  }
5
}

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.

zeytal.json

1
{
2
  "tailwind": {
3
    "globalRewriteTokenNames": {
4
      "-negative$": "-neg",
5
      "outline-width-": "outline-"
6
    }
7
  }
8
}

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:

zeytal.json

1
{
2
  "tailwind": {
3
    "namespaces": {
4
      "fontFamily": {},
5
      "fontSize": {},
6
      "fontWeight": {},
7
      "letterSpacing": {},
8
      "lineHeight": {},
9
      "color": {},
10
      "spacing": {},
11
      "breakpoint": {},
12
      "container": {},
13
      "radius": {},
14
      "shadow": {},
15
      "insetShadow": {},
16
      "dropShadow": {},
17
      "blur": {},
18
      "perspective": {},
19
      "aspect": {},
20
      "ease": {},
21
      "animate": {}
22
    }
23
  }
24
}

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.

zeytal.json

1
{
2
  "tailwind": {
3
    "namespaces": {
4
      "color": {
5
        "tokensMapping": ["colors-"]
6
      }
7
    }
8
  }
9
}

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

Mapped TailwindCSS CSS color variables

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.

zeytal.json

1
{
2
  "tailwind": {
3
    "namespaces": {
4
      "color": {
5
        "tokensMapping": ["colors-"],
6
        "stripTokenNames": ["colors-"]
7
      }
8
    }
9
  }
10
}

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:

Stripped TailwindCSS CSS color variables

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.

zeytal.json

1
{
2
  "tailwind": {
3
    "namespaces": {
4
      "color": {
5
        "tokensMapping": ["colors-"],
6
        "rewriteTokenNames": {
7
          "colors-": "color-",
8
          "color-background-": "color-bg-"
9
        }
10
      }
11
    }
12
  }
13
}

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:

Rewriting TailwindCSS CSS color variables

Code example

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

Go to code example

Config defaults

zeytal.json

1
{
2
  "tailwind": {
3
    "tokensPrefix": "",
4
    "globalModes": [],
5
    "globalIgnoreTokenNames": [],
6
    "globalStripTokenNames": [],
7
    "globalRewriteTokenNames": {},
8
    "namespaces": {
9
      "fontFamily": {
10
        "tokensMapping": [],
11
        "stripTokenNames": [],
12
        "rewriteTokenNames": {}
13
      },
14
      "fontSize": {
15
        "tokensMapping": [],
16
        "stripTokenNames": [],
17
        "rewriteTokenNames": {}
18
      },
19
      "fontWeight": {
20
        "tokensMapping": [],
21
        "stripTokenNames": [],
22
        "rewriteTokenNames": {}
23
      },
24
      "letterSpacing": {
25
        "tokensMapping": [],
26
        "stripTokenNames": [],
27
        "rewriteTokenNames": {}
28
      },
29
      "lineHeight": {
30
        "tokensMapping": [],
31
        "stripTokenNames": [],
32
        "rewriteTokenNames": {}
33
      },
34
      "color": {
35
        "tokensMapping": [],
36
        "stripTokenNames": [],
37
        "rewriteTokenNames": {}
38
      },
39
      "spacing": {
40
        "tokensMapping": [],
41
        "stripTokenNames": [],
42
        "rewriteTokenNames": {}
43
      },
44
      "breakpoint": {
45
        "tokensMapping": [],
46
        "stripTokenNames": [],
47
        "rewriteTokenNames": {}
48
      },
49
      "container": {
50
        "tokensMapping": [],
51
        "stripTokenNames": [],
52
        "rewriteTokenNames": {}
53
      },
54
      "radius": {
55
        "tokensMapping": [],
56
        "stripTokenNames": [],
57
        "rewriteTokenNames": {}
58
      },
59
      "shadow": {
60
        "tokensMapping": [],
61
        "stripTokenNames": [],
62
        "rewriteTokenNames": {}
63
      },
64
      "insetShadow": {
65
        "tokensMapping": [],
66
        "stripTokenNames": [],
67
        "rewriteTokenNames": {}
68
      },
69
      "dropShadow": {
70
        "tokensMapping": [],
71
        "stripTokenNames": [],
72
        "rewriteTokenNames": {}
73
      },
74
      "blur": {
75
        "tokensMapping": [],
76
        "stripTokenNames": [],
77
        "rewriteTokenNames": {}
78
      },
79
      "perspective": {
80
        "tokensMapping": [],
81
        "stripTokenNames": [],
82
        "rewriteTokenNames": {}
83
      },
84
      "aspect": {
85
        "tokensMapping": [],
86
        "stripTokenNames": [],
87
        "rewriteTokenNames": {}
88
      },
89
      "ease": {
90
        "tokensMapping": [],
91
        "stripTokenNames": [],
92
        "rewriteTokenNames": {}
93
      },
94
      "animate": {
95
        "tokensMapping": [],
96
        "stripTokenNames": [],
97
        "rewriteTokenNames": {}
98
      }
99
    }
100
  }
101
}

PreviousVariables config
NextExamples