Setup PostCSS and Tailwind with Poi
This lesson walks through setting up a Poi project using PostCSS and the popular Tailwind library for building out your styles. Poi supports PostCSS out of the box, but to show the true power of PostCSS, you need leverage PostCSS plugins which requires its own bit of setup.
Instructor: [00:00] I'll install a popular PostCSS library called Tailwind CSS. I want to use the Tailwind binary, so I'll npm n it, y, so I have my package.json. Then I can npx Tailwind in it to create the configuration file. You can see that generated right here.
[00:22] I need to create my PostCSS config file, which is a module exports. I need to add the Tailwind plugin, so we'll first require that, so tailwindcss = require ('tailwind'). Then we want Tailwind to use our Tailwind config file.
[00:44] Now with all that configured, let's go ahead and write our index.js file. We're going to set the document query selector to grab the app ID, then set some inner HTML. We'll use our Tailwind classes, text white and background gray, and say, "Hello, Tailwind!"
[01:04] Then we can create our styles.css, bring in our Tailwind preflight and our Tailwind utilities, then go ahead and import our styles into our main index. Run POI, and open localhost:4000 in the browser. It looks like my autocomplete chose class name instead of class. We'll save that.
[01:33] You can see white text with a grey background. We can take these two styles out, open up our style CSS, create our own style. We'll call it hello. We'll use apply from Tailwind to grab text white and background gray. We can use our hello class in here, hit save.
[01:55] Now we have a fully configured PostCSS using Tailwind, and the only command we have to run is just POI.