# Как подключить Tailwind в Vue 2

Tailwind

# Установить Tailwind

Для работы Tailwind так же требуется установить PostCSS и Autoprefixer. По состоянию на ноябрь 2021 у Tailwind есть проблемы с совместимостью с версией 8 PostCSS. Поэтому ставим PostCSS 7.

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

# Создать конфигурацию Tailwind

Создать в корне проекта файл tailwind.config.js и добавить в него следующий код.

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

./tailwind.config.js

# Создать конфигурацию PostCSS

Для PostCSS создать файл postcss.config.js с следующим содержимым.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

./postcss.config.js

# Добавить tailwind в CSS проекта

Создать в папке src файл index.css и добавить в него импорт базовых стилей tailwind.

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

./src/index.css

# Импортировать стили в проект

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

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

./src/main.js