Vite vue ts tailwind template: Install TailwindCSS

Install and setup TailwindCSS

1. Start by following official Install Tailwind CSS with Vue 3 and Vite instructions. Install tailwindcss.
   

   $ npm install --save-dev tailwindcss@latest postcss@latest autoprefixer@latest
   

2. Create configuration files.
   

   $ npx tailwindcss init -p
   

3. Configure tree-shaking (removal of unused styles). Update tailwind.config.js.
   

   -  purge: [],
   +  purge: ['./index.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
   

4. Create index.css. touch src/index.css.

5. Update src/index.css.
   

   +@tailwind base;
   +@tailwind components;
   +@tailwind utilities;
   

6. Import src/index.css in src/main.ts.
   

    import App from '@/App.vue'
   +import '@/index.css'
   

7. git add -u && git add tailwind.config.js postcss.config.js src/index.css

8. git commit -m 'install tailwindcss'

Links

• https://tailwindcss.com/docs/guides/vue-3-vite
• https://postcss.org

Project

imomaliev / vue-ts-tailwind

Vite + Vue + TypeScript + TailwindCSS template