DEV Community

Cover image for Vite vue ts tailwind template: Install TailwindCSS
Sardorbek Imomaliev
Sardorbek Imomaliev

Posted on

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

Project

GitHub logo imomaliev / vue-ts-tailwind

Template vite vue typescript tailwind

Discussion (0)