Установите Tailwind CSS с Nuxt.js

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

Начните с создания нового проекта Nuxt.js, если у вас его еще нет. Самый распространенный подход - использовать Create Nuxt App:

npx create-nuxt-app my-project
cd my-project

Настройка Tailwind CSS

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

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

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

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

Добавьте модуль @nuxtjs/tailwindcss в раздел buildModules вашего файла nuxt.config.js:

// nuxt.config.js
export default {
  buildModules: ['@nuxtjs/tailwindcss']
}

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

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

npx tailwindcss init

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

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

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

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

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

  // tailwind.config.js
  module.exports = {
-   purge: [],
+   purge: [
+     './components/**/*.{vue,js}',
+     './layouts/**/*.vue',
+     './pages/**/*.vue',
+     './plugins/**/*.{js,ts}',
+     './nuxt.config.{js,ts}',
+   ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

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

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

Откройте файл ./assets/css/tailwind.css, который Nuxt.js генерирует для вас по умолчанию , и используйте директиву @tailwind, чтобы включить утилиты Tailwind base, components и utilities стили, заменяющие исходное содержимое файла:

/* ./assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

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

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