Step 1: Create a new folder and go into it1.
take project
Step 2: Install Tailwind and stuff:
npm init -y
npm install tailwindcss postcss-cli autoprefixer
npm install @fullhuman/postcss-purgecss
npx tailwind init
Step 3: Create new file postcss.config.js
and paste in:
const purgecss = require('@fullhuman/postcss-purgecss')({
content: [
'./public/*.html',
],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
...process.env.NODE_ENV === 'production'
? [purgecss]
: []
]
}
Step 4: Create css/tailwind.css
file and paste in:
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 5: Open package.json
and under scripts
, add two new scripts:
"build": "postcss css/tailwind.css -o public/build/tailwind.css",
"production": "postcss --env 'production' css/tailwind.css -o public/build/tailwind.css"
Step 6: Build Tailwind.
npm run build
This will create the public
folder and compile the build/tailwind.css
file under it.
Step 7: Create index.html
file in the public
folder, and include the compiles CSS file:
<link rel="stylesheet" href="/build/tailwind.css">
The resulting tailwind.css
file is HUGE. Before publishing, run npm run production
, which will use PurgeCSS to remove unnecessary classes.
- With oh-my-zsh,
take foo
is equivalent tomkdir foo && cd foo
. [return]