Adding Tailwind

[00:00:00]
>> One of the things that we've been a little handwavy about, is we wrote a CSS module for our button, and we imported it and our button is styled correctly. And that's a good practice that you should do almost all the time. But we all know that there are global style sheets, right?

[00:00:22]
Even if it's just a CSS reset, right, you probably have some kind of global stylesheet. You cannot import everything per file, right? And so right now if we had something like a background color in index.css, then we wouldn't see anything. And so we missed all of our CSS reset, all of our kind of default styling.

[00:00:46]
We wanna pull that into storybook. But some of the topics we're covering now when we talk about pulling a style sheet and having global styles, I'm gonna show it along with adding in Tailwind cuz that's a pattern. But everything I'm gonna talk about for the next little bit is not Tailwind specific.

[00:01:09]
You can do it with Tailwind, you can do it without Tailwind. I'm gonna do it with Tailwind so I don't have to do it twice. But it's true of your CSS reset. It's true whatever style sheets that you have. It's true Google Font scripts, it's true of whatever you want.

[00:01:26]
No matter what the situation is, I'm just gonna use setting up Tailwind as the exemplar. Now I have Tailwind installed as a dependency. If you're working your own repo, npm install tailwind and then you do tailwind init, right? There's a whole course on Tailwind, you should probably watch it.

[00:01:45]
So we won't get into the details there. But let's talk about the kind of pattern of pulling in that initial style sheet. Where your style sheet lives, might be on a public file, it might be somewhere else. I have this index.css in my source directory mostly cuz that's where we put it.

[00:02:07]
So I'll kid, it'll be slightly different, whatever. I have Tailwind kinda setup in here as well. Vite out of the box supports CSS, you get that for free, and also supports importing CSS files as we saw with the module.css. That's all Vite stuff, that's not story but specific, it's not React specific, Webpack has basically the same functionality as well.

[00:02:32]
So I've got this file, and all I really need to do here is go into that preview.ts, and I can just say, import '../src/index.css'. And just to do a sanity check, I'm gonna just add some ridiculous CSS in there so I can make sure that it is, background-color is red.

[00:03:06]
Cool, and so you can see that my CSS, two things to note. Hey, it's here. Yay, thumbs up, great. And two, it is scoped only to the actual preview, right? That's why we're importing here so that everything's set up the way that we would want it. In this case as well, this could be any style sheet.

[00:03:27]
It's not have to be a Tail, all I did was import a CSS file. And I'm getting Tailwind's reset, basically. That's all I'm getting at this moment.