How to Use Tailwind CSS With JavaScript Design Tokens

[00:00 - 00:09] So in the previous lesson, we learned about how to use the design tokens to create our own telewind CSS. So we go to foundation and then source.

[00:10 - 00:30] This is our telewind preset that we used to create our own telewind preset that consumers will consume and start styling their components. So in order to use it, let's go to our React packet and install tailwind.

[00:31 - 00:43] So we are targeting the React packets and we add a Z development dependency tailwind CSS. And we'll go back to the code editor.

[00:44 - 00:53] Packages react. And then let's create a tailwind.config.js file.

[00:54 - 01:06] And import this code snippet. So the first line for anyone that is not familiar, this is about allowing typ ings in our telewind configuration.

[01:07 - 01:21] Here we are consuming the tailwind preset file that we created. The content we are targeting, everything that is HTML, JavaScript, JSX, TSX, and TS.

[01:22 - 01:28] And then we are not using any plugins. And basically it says here that it cannot resolve the preset config.

[01:29 - 01:42] So let's find out why. We'll go here and we'll see that it should find it, which is weird.

[01:43 - 01:56] Maybe we have, yeah, we had an aiming issue and hopefully now it works as expected. So we close this one and again, packages react.

[01:57 - 02:08] And inside the source we can create an input.css. And let's paste the following lines.

[02:09 - 02:17] Here we import everything that tailwind recommends us to import. And in the first line we import the fonts that we will use.

[02:18 - 02:33] Of course, this will be included in our typography CSS if we continue this. And then let's go to our packets.json inside the react packets and add some more scripts.

[02:34 - 02:49] So we will add the following scripts. So in every build step we will first build the CSS and then combine our Type Script components to create native JavaScript.

[02:50 - 03:02] So basically that's it. We can build our react library right now.

[03:03 - 03:05] Perfect. And now our components are built.

[03:06 - 03:11] Everything is compiled. And if we go through the library we can see also our output CSS.

[03:12 - 03:22] And this is the CSS.tailwind generates with everything that we are using. So we are ready to create a new button component.

[03:23 - 03:35] And that will be the button that is using the tailwind. Perfect.

[03:36 - 03:46] And let's paste this code. And you can see here that we have autocomplete if we use the extension that I'm going to show you right now.

[03:47 - 03:51] It's called tailwind. In tail sense.

[03:52 - 03:59] So this one is reading our configuration and it can recommend everything. So for example here we have the background of primary 500.

[04:00 - 04:04] And we can use everything we need. For example the rounded.

[04:05 - 04:19] For sure we have the prefix that we defined and then for the rounded we have the small and large which is inherited from the tokens and generated automatically. So that's how easy it is to work with tailwind.

[04:20 - 04:37] And let's see an example in our storybook so we can have a visual representation of it. And again we made a mistake and we generated some type script file files in our stories.

[04:38 - 04:53] We can skip this. Button tailwind.stories.tsx and copy the button stories inside it.

[04:54 - 05:11] This is our tailwind button and we should import the button tailwind. And let's hope it will work.

[05:12 - 05:22] So here we have the tailwind button and it does not. So let's find out really quick what is happening.

[05:23 - 05:52] Here we have the button and here we have the story of the button so everything should work. But I think we are missing something and what we miss is that we are consuming the button and we are generating an output CSS but we are not consuming the output CSS.

[05:53 - 06:11] So we should consume this output CSS in our story or right now in the story because this is our consumer but if we were a consumer we should import the CSS. So here we are importing directly from the React library the output CSS.

[06:12 - 06:19] This is that we will contain all of our component classes. So let's try and load this page.

[06:20 - 06:25] It says that we cannot find it. So let's go back.

[06:26 - 06:39] We have React library and output CSS. So maybe this is an error with storebook and we need to refresh.

[06:40 - 06:56] So let's try this out. And we are going somewhere for sure it was an issue with storebook but now we can see that we don't have styles.

[06:57 - 07:10] So we are using this class but this class is not where we are to found. So we suspect that this is maybe an issue with how we generate the classes.

[07:11 - 07:23] So let's go back to packages and see the package.json. And let's actually watch our CSS for changes.

[07:24 - 07:29] Yarn. Yeah.

[07:30 - 07:36] And it's done. So it's working and we can make some changes in our button component.

[07:37 - 08:00] For example we can have a margin of four or eight pixels and then four pixels top and bottom. And then the text should be of a neutral and then white color.

[08:01 - 08:33] And this is how you are writing tailwind alongside with your component library. So I think that was a really nice lesson of how you can consume JavaScript tokens, create the preset and then distribute the preset to the team so they can use tailwind as we are using right now to write their own components and be sure that they will use the official colors, the official radises, the official spacing and everything that you provide for the design systems.

[08:34 - 08:44] So we have the JavaScript implementation and the tailwind implementation and yeah, feel free to be creative and use any implementation you need for your own use case.