1. init npm init - ynpm install tailwindcss postcss - cli autoprefixernpx tailwind init 2. postcss.config.js const purgecss = require( ‘ @fullhuman/postcss-purgecss ‘ )({ content: [ ‘ ./src/**/*.html ‘ , ‘ ./src/**/*.vue ‘ , ],
1. init
npm init -y npm install tailwindcss postcss-cli autoprefixer npx tailwind init
2. postcss.config.js
const purgecss = require(‘@fullhuman/postcss-purgecss‘)({ content: [ ‘./src/**/*.html‘, ‘./src/**/*.vue‘, ], defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] }) module.exports = { plugins: [ require(‘tailwindcss‘), require(‘autoprefixer‘), ...process.env.NODE_ENV === ‘production‘ ? [purgecss] : [] ] }
3. src/css/tailwind.css
@tailwind base; @tailwind components; @tailwind utilities;
4. package.json
"scripts": { "dev": "postcss src/css/tailwind.css -o public/css/all.css" },
5. public/index.html
<title>index</title>
<link rel="stylesheet" href="./css/all.css"><body> <h1 class="text-xl font-bold text-blue-500 text-center">Hello World!</h1>