Laravel 10+ Vite підключаємо до Sass Tailwind

У статті запропоновано простий шлях, за допомогою яких команд PowerShell можна легко підключити таблицю стилів Tailwind CSS для Laravel 9, 10.

Попередження! Цей список команд є актуальним у лютому 2024 року. На момент створення статті використовуються такі версії:

• vite 5.1.3
• Laravel Framework 10.45.1
• node-v20.9.0

Laravel, починаючи з 9 версії, використовує збирач Vite, а він у свою чергу надає вбудовану підтримку препроцесорів.

• .scss
• .sass
• .less
• .styl
• .stylus

Проста послідовність дій описана нижче.

1. Через командний рядок ми встановлюємо препроцесор, в даному прикладі ми вибираємо «sass», хоча при бажанні доступні також «less» і «stylus». Команду можна знайти на офіційній сторінці сайту vitejs.dev/guide/features.html#css-pre-processors
2. Створюємо нову папку, а в ній файл 'resources/scss/app.scss' - новий рядок необхідно додати у файлі vite.config.js
3. Пишемо команду установки
4. На сторінці привітання можна видалити весь вміст усередині тегів тіла сторінки, а також рядок стилів body, style Далі у тегах head необхідно внести рядок підключення
5. Тепер у тілі вітального файлу ми можемо писати вміст і встановлювати класи блоків. Описи класів заносяться у файлі 'resources/scss/app.scss' Однак, щоб стилі відобразилися на сторінці, слід вказати команду запуску
6. В іншій вкладці командного рядка запускаємо сервер фреймворку та переходимо за посиланням
7. На офіційній сторінці tailwindcss.com/docs/guides/laravel знаходимо команди для встановлення бібліотеки стилів. Але перш ніж їх завантажувати, потрібно призупинити роботу сервера. Зверніть увагу, що у файлі package.json утворилися нові залежності із зазначеними назвами
8. Створюємо новий файл postcss.config.js
9. У нашому проекті з'явилися два конфігураційні файли. На тій же сторінці офіційного сайту знаходимо код, який потрібно внести до файлу tailwind.config.js
10. Необхідно внести зміни до файлу resources\css\app.css. На тій самій сторінці офіційного сайту знаходимо список, який додаємо за вказаною адресою. Врахуйте, що цей запис можна залишити вгорі файлу resources\scss\app.scss
11. Після внесених змін знову запускаємо компілятор vite

export default defineConfig({
     plugins: [ 
          laravel({ 
               input: [
                   'resources/css/app.css',
                   'resources/js/app.js',
                   'resources/scss/app.scss'
                   ], 
     refresh: true,
          }),
     ],
}); 

Ctrl + C

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ], //add this lines
  theme: {
    extend: {},
  },
  plugins: [],
}

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