vite-vue2-tailwind Tailwind Templates

Vite Vue2 Tailwind

lisa-vue

This template should help get you started developing with Vue 3 in Vite.

vue3 + vite

https://vuejs.org/ https://vitejs.dev/

npm init vue@latest

# vue3 + tailwindcss

Setting up Tailwind CSS in a Vue 3 and Vite project. https://tailwindcss.com/docs/guides/vite

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

[tailwind.config.js]

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Create a ./src/index.css

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

Import the newly-created ./src/index.css file in your ./src/main.js file.

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Top categories

Loading Svelte Themes