Last active
February 23, 2020 15:18
-
-
Save florianjs/cb81c38bc446d5fcec2a45df362f94d7 to your computer and use it in GitHub Desktop.
Tailwind CSS V1.2.0 - PurgeCSS config file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
] | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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