Skip to content

Instantly share code, notes, and snippets.

@florianjs
Last active February 23, 2020 15:18
Show Gist options
  • Save florianjs/cb81c38bc446d5fcec2a45df362f94d7 to your computer and use it in GitHub Desktop.
Save florianjs/cb81c38bc446d5fcec2a45df362f94d7 to your computer and use it in GitHub Desktop.
Tailwind CSS V1.2.0 - PurgeCSS config file
Install all packages:
npm init -y
npm i postcss-cli postcss cssnano @fullhuman/postcss-purgecss tailwindcss --save-dev
npm i watch --save-dev // ( optionnal )
package.json :
Change the path to your styles.css and main.css ( "build:css": "postcss YOUR_PATH/styles.css -o YOUR_PATH/main.css", )
postcss.config.js :
Change the path to your *.html files and *.js files (if needed) in line 13
Follow the Steps 2 - 3 & 4 : https://tailwindcss.com/docs/installation/
When you are ready, build it :
npm run build:css
{
"name": "YOUR_OWN_NAME",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build:css": "postcss styles.css -o main.css",
"watch": "watch \"npm run build:css\" ./"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@fullhuman/postcss-purgecss": "^2.0.6",
"cssnano": "^4.1.10",
"postcss": "^7.0.26",
"postcss-cli": "^7.1.0",
"tailwindcss": "^1.2.0"
},
"dependencies": {
"watch": "^1.0.2"
}
}
const tailwindcss = require('tailwindcss');
const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
module.exports = {
plugins: [
tailwindcss('./tailwind.config.js'),
cssnano({
preset: 'default'
}),
purgecss({
content: ['./*.html', './assets/js/*.js'],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || []
}),
autoprefixer
]
};
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */
@tailwind utilities;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment