Домашняя страница Tailwind CSS
  1. Installation
  2. Установите Tailwind CSS с помощью Nuxt

  1. Создайте свой проект

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

    Terminal
    npx nuxi init my-projectcd my-project

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

    Установите tailwindcss и его одноранговые зависимости через npm, а затем запустите команду init для создания файла tailwind.config.js.

    Terminal
    npm install -D tailwindcss@3 postcss autoprefixernpx tailwindcss init

  3. Добавьте Tailwind в свою конфигурацию PostCSS

    Добавьте tailwindcss и autoprefixer в объект postcss.plugins в файле nuxt.config.js.

    nuxt.config.js
    // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

  4. Настройте пути к шаблону

    Добавьте пути ко всем файлам вашего шаблона в файл tailwind.config.js.

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  5. Добавьте директивы Tailwind в свой CSS

    Создайте файл ./assets/css/main.css и добавьте директивы @tailwind для каждого слоя Tailwind.

    main.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  6. Добавьте файл CSS глобально

    Добавьте только что созданный файл ./assets/css/main.cssв массив css в файле nuxt.config.js.

    nuxt.config.js
    // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

  7. Начните процесс сборки

    Запустите процесс сборки с помощью npm run dev.

    Terminal
    npm run dev

  8. Начните использовать Tailwind в своем проекте

    Начните использовать служебные классы Tailwind для оформления своего контента.

    app.vue
    <template>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</template>