Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Setup PostCSS and Tailwind with Poi

    John LindquistJohn Lindquist

    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.

    webpackwebpack
    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss