Tailwind CSS
September 05, 2023npm init -y
npm i tailwindcss postcss-cli autoprefixer
npx tailwind init
npm i -D live-server nodemon npm-run-all
postcss.config.js
module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
};
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["css/**/*.css", "public/**/*.html"],
theme: {
extend: {},
},
plugins: [],
};
package.json (modified from https://alexanderzeitler.com/articles/watch-tailwind-changes-update-browser-sync/)
"scripts": {
"build": "postcss css/tailwind.css -o public/build/tailwind.css",
"start": "live-server public",
"watch:dev": "nodemon -x npm run build -- --watch",
"watch": "run-p watch:dev start"
},
public/index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tailwind Quickstart</title>
<link rel="stylesheet" href="/build/tailwind.css" />
</head>
<body>
<h1 class="text-4xl font-bold text-center text-blue-500">Hello World!</h1>
</body>
</html>
css/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Approach
- Utility first. Everything is utility methods.
Customizing with Apply
- Put
@tailwind utilities;
below custom classes to allow combining utilities and overriding defined values in custom classes - Variants are not supported in
@apply
, use css. e.g..btn:hover
- Exposes media queries by name via
@screen
. e.g.@screen sm {}
- Use for global tag styles, avoid for all components. Switch to framework to build components.
/* ... */
.btn {
@apply inline-block bg-indigo-500 text-white px-5 py-3 shadow-lg rounded-lg uppercase tracking-wider font-semibold text-sm;
}
.btn:hover {
@apply bg-indigo-400;
}
@screen sm {
.btn {
@apply text-base;
}
}
@tailwind utilities;
Config
Generate full config
npx tailwind init tailwind-full.config.js --full
- Anything at top level replaces
- Anything in extend merges
production mode
strip unused css
npm i @fullhuman/postcss-purgecss
process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
content: [
'./src/**/*.vue',
'./public/index.html',
],
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
}),