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,
          }),
     ],
}); 

/** @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;