/tailwind-project

Tailwind Playground

Primary LanguageHTML

TAILWIND PROJECT

https://tailwindcss.com/ A utility-first CSS framework for rapidly building custom designs.

SETTING UP TAILWIND AND POSTCSS

  1. Install tailwindcss, postcss-cli, and autoprefixer
npm install tailwindcss post-cli autoprefixer
  1. Init tailwind configuration files
npx tailwind init

or

npx tailwind init tailwind-full.config.js --full
  1. Create postcss.config.js file
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}
  1. Create tailwind.css file
@tailwind base;
@tailwind components;
@tailwind utilities;

...
  1. Create build script in your package.json
"scripts": {
  "build": "postcss css/tailwind.css -o public/build/tailwind.css"
},
  1. Install live-server package to help speed up development (live reload on browser)
npm install -g live-server
  1. Optimize production build with remove unused css with purgecss.com
npm install @fullhuman/postcss-purgecss

and add in postcss.config.js

process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
  content: [
    './public/index.html'
  ],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})