Installation
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.
It's fast, flexible, and reliable — with zero-runtime.
Installing Tailwind CSS as a webpack loader is the most seamless way to integrate it with webpack-based projects. It replaces the need for PostCSS in your webpack build pipeline.
Install tailwindcss, @tailwindcss/webpack, and other webpack dependencies via npm.
npm install tailwindcss @tailwindcss/webpack mini-css-extract-plugin css-loaderAdd @tailwindcss/webpack as a loader in your webpack.config.js file, along with css-loader and MiniCssExtractPlugin for extracting your CSS.
const MiniCssExtractPlugin = require('mini-css-extract-plugin')module.exports = { plugins: [new MiniCssExtractPlugin()], module: { rules: [ { test: /\\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader', '@tailwindcss/webpack'], }, ], },}Add an @import to your CSS file that imports Tailwind CSS.
@import "tailwindcss";Run your build process with npx webpack serve or whatever command is configured in your package.json file.
npx webpack serveMake sure your compiled CSS is included in the <head>, then start using Tailwind's utility classes to style your content.
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/dist/main.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>