Laravel: подключение Tailwind CSS 3

Опубликовано: четверг, 20 января 2022 г. в 09:57

Настройка Tailwind CSS 3 в проекте Laravel, перевод официальной документации Tailwind.

Создайте Laravel проект

Начните с создания нового проекта Laravel, если его у вас ещё нет. Наиболее распространённый способ — использовать установщик Laravel.

laravel new my-project
cd my-project

Если вы используете Mix, то для вас первый вариант установки. Если Vite, то второй

1 Использование Laravel Mix

1.1 Установите Tailwind CSS

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

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

1.2 Добавьте Tailwind в конфигурацию Laravel Mix

В файле webpack.mix.js добавьте tailwindcss, как плагин postcss

mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
    require("tailwindcss"),
  ]);

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

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

module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

1.4 Добавьте директивы Tailwind в свой CSS файл

Добавьте директивы @tailwind для каждого слоя Tailwind CSS в свой файл ./resources/css/app.css.

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

1.5 Запустите процесс сборки

Запустите процесс сборки командой npm run watch

npm run watch

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

Убедитесь, что ваш скомпилированный CSS файл включён в <head> и начните использовать служебные классы Tailwind CSS для стилизации вашего контента.

Пример файла app.blade.php:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

2 Использование Vite

2.1 Установите Tailwind CSS

Установите Tailwind CSS и его зависимости через npm, а затем запустите команду init для генерации tailwind.config.js и postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

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

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

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

Добавьте директивы @tailwind для каждого слоя Tailwind CSS в свой файл ./resources/css/app.css.

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

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

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

npm run dev

2.5 Начните использовать Tailwind CSS в своём проекте

Убедитесь, что скомпилированный CSS включён в <head>, а затем начинайте использовать служебные классы Tailwind CSS для стилизации вашего контента.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @vite('resources/css/app.css')
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>