In this episode, we walk through how to set up Tailwind CSS in your project using PostCSS from scratch. This approach is great if your framework doesn't natively support Tailwind, or you're working with something less common than, say, Laravel.
We'll start with an empty folder, initialize a package.json
using npm, and install Tailwind along with PostCSS and Autoprefixer. After explaining a bit about what PostCSS does, we get everything set up so we can write styles in an app.css
file, then process it with PostCSS to output our final CSS file into a public directory.
You'll see how to create the necessary config files—postcss.config.js
for your plugins, and later a tailwind.config.js
for customizing Tailwind. We'll wire up npm scripts for an easy development workflow, then actually build our CSS and check that Tailwind utility classes are working.
Next, we discuss optimizing for production. Since Tailwind generates a big CSS file by default (with all those utility classes), we use Tailwind's purge
option to strip out anything we're not using. By providing the right template paths in the purge configuration, our production build produces a much smaller style sheet.
By the end of the episode, you'll have a flexible setup for using Tailwind CSS via PostCSS, ready for both development and efficient production builds. Plus, you'll know how to tweak it as your project grows!