Creating Tailwind CSS Presets With Design Tokens

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. 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? 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. To create a tailwind preset, we will go to source, and then we can create a file called tailwind. Tailwinddesign preset.config.js. 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. 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? 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. So here we have, we require the tokens. Then we have a helper function to flatten the values. And basically we extend the theme of tailwind. We don't extend, but we create our own theme. 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. 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.