How to use Purgecss with Tailwindcss in a VueJS Project
In a Vue project, or an existing project pull in a few dependencies:
tailwindcss
postcss
postcss-cli
Make sure your stylesheet is referenced in your index.html.
Initialise your tailwind config file using:
npx tailwind init --full
Then in your jackage.json, in the "scripts" section, add:
"css:build": "postcss path/to/your/styles.css -o path/to/your/public/styles.css"
Then pull in postcss-purgecss:
npm install @fullhuman/postcss-purgecss
Now build the rc file for postcss to reference when it runs in the project root folder:
new file '.postcssrc.js'
then include the script in the video at 07:50 (I can't include the code in video comments)
this new .postcssrc.js file is the default entry for postcss configuration.
I was assuming I would pull in the postcss tools via a postcss.config.js
Remember to remove the "postcss" entry in your package.json file.
Then run the script you put into the package.json file:
npm run css:build
This should then output the slimmed downed styles.css file into the destination/public folder you specified.
Let me know if you found this video helpful.
