Установите Tailwind CSS с Vue 3 и Vite

Создание вашего проекта

Начните с создания нового проекта Vite, если у вас его еще нет.

npm init vite my-project
cd my-project

Затем установите клиентские зависимости Vite, используя npm:

npm install

Настройка Tailwind CSS

Tailwind CSS требует Node.js 12.13.0 или выше.

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

Устанавливаем Tailwind его одноранговые зависимости, используя npm:

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

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

Затем сгенерируйте свои(й) tailwind.config.js и postcss.config.js файлы:

npx tailwindcss init -p

Это создаст минимальный файл tailwind.config.js в корне вашего проекта:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Узнайте больше о настройке Tailwind в документации по конфигурации.

Он также создаст файл postcss.config.js, который включает уже настроенные файлы tailwindcss и autoprefixer:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Если вы планируете использовать какие-либо другие плагины PostCSS, вам следует прочитать нашу документацию по использованию PostCSS в качестве препроцессора для получения более подробной информации о том, как лучше всего заказать их вместе с Tailwind.

Настройте Tailwind, чтобы удалить неиспользуемые стили в продакшене

В вашем файле tailwind.config.js, настройте опцию purge, указав пути ко всем вашим страницы и компоненты, чтобы Tailwind мог изменять дерево неиспользуемых стилей в производственных сборках:

  // tailwind.config.js
  module.exports = {
-   purge: [],
+   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, чтобы включить утилиты Tailwind base, components и utilities стили, заменяющие исходное содержимое файла:

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

Tailwind заменит эти директивы во время сборки на все стили, которые он генерирует на основе вашей настроенной дизайн-системы.

Прочтите нашу документацию по добавлению базовых стилей, извлечению компонентов, и добавлению новых утилит для лучшие практики по расширению Tailwind с помощью вашего собственного CSS.

Наконец, убедитесь, что ваш файл CSS импортируется в файл ./src/main.js:

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

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

Вы закончили! Теперь, когда ты бежишь npm run dev, Tailwind CSS будет готов к использованию в вашем проекте Vue 3 и Vite.

Далее узнайте о рабочем процессе “сначала утилиты” →