[Poi] 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.

 

Install:

npm i -D tailwindcss

 

Init tailwind:

npx tailwind init    

It will generate a tailwind.js file.

 

Create a postcss.config.js:

const tailwindcss = require('tailwindcss');

module.exports = {
    plugins: [
        tailwindcss("./tailwind.js")
    ]
};

 

index.js:

import "./style.css";

document.querySelector("#app")
    .innerHTML = `
    <div class="hello">Hello Tailwind</div> 
    `;

 

style.css:

@tailwind preflight;
.hello {
    @apply .text-white .bg-grey
}
@tailwind utilities;