Name: Setup PostCSS and Tailwind with Poi
Uploaded: 2017-11-29T12:22:35-06:00
Description: 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.

Use Poi to Build an Index.js with Modern JavaScript Features

Customize Poi's Default index.html Template

Configure Poi for Advanced Template Control

Build a Vue App with Poi

Customize Babel to Build a React App with Poi

Compile CSS or Sass with Poi

Use Markdown as React Components by Adding a Webpack Loader to Poi

Build and Analyze Your JavaScript Bundles with Poi

Use Poi Presets from npm to Skip Configuration

Setup PostCSS and Tailwind with Poi

Make Webpack Easy 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.

https://app.egghead.io/api/v1/lessons/webpack-setup-postcss-and-tailwind-with-poi/subtitles

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.

Setup PostCSS and Tailwind with Poi

Share this video with your friends

Course

Make Webpack Easy with Poi