Vite + Vue3 + Tailwindcss Starter scripts kit.md

1. Install Vue.js

npm init vue@latest

then:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

2. Install TalwindCSS

1. Install

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. Create configuration files

npx tailwindcss init -p

3. Configuration

// tailwind.config.js
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkmode: 'media', // 'media' or 'class' - 'media' is default, so you don't need to set it up here
  theme: {
    extend: {}
  }
  ...
}

4. include Tailwind in CSS

/* e.g. ./src/assets/main.css */
@import - if neeeded - always firs

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

/// other css styles

5. Make sure your style is imported

// src/main.js/ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';

import './assets/main.css';

const app = createApp(App);
...