Creating Tailwind CSS Presets With Design Tokens

Creating a Tailwind CSS preset with JavaScript design tokens

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the Build a Complete Company Design System course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to Build a Complete Company Design System, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Build a Complete Company Design System

  • [00:00 - 00:13] So, you may have noticed that we have two groups to transform our tokens, the JS source and the JS. And one of them is actually outputting back to the tokens folder.

    [00:14 - 00:24] So if we open the foundation and go here to the JavaScript folder, you can see that this is an auto-generated file from the style dictionary. And why do we actually need this?

    [00:25 - 00:42] So in order to create a tailwind preset, we need to work with JavaScript token values, and this is exactly why we need this. So we generated JavaScript tokens from the style dictionary CLI, and we will feed them directly to our tailwind preset so we can publish this.

    [00:43 - 01:01] To create a tailwind preset, we will go to source, and then we can create a file called tailwind. Tailwinddesign preset.config.js.

    [01:02 - 01:14] We can give it any name we like. And then we will copy and paste the code that can be found in the text version of this lesson.

    [01:15 - 01:33] So what we are doing here, we are basically importing the token values from the token values from the generated token values. But why it's not working?

    [01:34 - 01:45] It's not working because I pasted the file inside the tokens folder, so it couldn't import this. But now hopefully it would work.

    [01:46 - 01:54] So here we have, we require the tokens. Then we have a helper function to flatten the values.

    [01:55 - 01:59] And basically we extend the theme of tailwind. We don't extend, but we create our own theme.

    [02:00 - 02:16] So the colors will be generated from the token colors, the same for border radius, for spacing, for animation, boxanto, font family, so on and so forth. And we click save.

    [02:17 - 02:31] And basically that was it. And we will see in the later lessons how we can actually import this preset and extend our own tailwind configuration as a consumer and style our components.