Как подключить Tailwind к проекту на vue

Подключение стилей Tailwind css к проекту на vue.

Статья актуальна на 1.01.2024.

Статья, которая помогла разобраться https://v2.tailwindcss.ru/docs/guides/vue-3-vite/

Создаем проект npm init vue@3 npm install

Устанавливаем tailwind npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Создаем конфигурацию файлов npx tailwindcss init -p

Появляется файл tailwind.config.js и в нем надо содержимое заменить на

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

В файл src/assets/main.css добавляем

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

Запускаем проект npm run dev

Примечания:

В файле tailwind.config.js в документации вместо export default надо было указать "module.exports =". У меня так не работало.

Если у вас уже был запущен проект, то его надо перезапустить после всех настроек.

Убедитесь, что файл src/assets/main.css подключается в файле main.js

import './assets/main.css'