Конфигурация Vue + Tailwindcss

Как настроить Tailwindcss с помощью Vue

Установите Tailwind через npm

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

Войдите в полноэкранный режим Выйти из полноэкранного режима

Создайте свои конфигурационные файлы

npx tailwindcss init -p

Войдите в полноэкранный режим Выйти из полноэкранного режима

Настройка Tailwind для удаления неиспользуемых стилей в производстве

// tailwind.config.js
module.exports = {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

Войти в полноэкранный режим Выйти из полноэкранного режима

Включите Tailwind в свой CSS

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Войти в полноэкранный режим Выйти из полноэкранного режима

Импортируйте свой CSS в main.js

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

Войти в полноэкранный режим Выйти из полноэкранного режима