Join egghead, unlock knowledge.

Want more egghead?

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

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    Instructor: 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.

    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.

    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!"

    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.

    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.

    Now we have a fully configured PostCSS using Tailwind, and the only command we have to run is just POI.