Настройка Tailwind CSS в проекте Laravel.
Начните с создания нового проекта Laravel, если у вас его еще нет. Самый распространенный подход - использовать установщик Laravel:
laravel new my-project
cd my-projectЗатем установите клиентские зависимости Laravel, используя npm:
npm installTailwind CSS требует Node.js 12.13.0 или выше.
Устанавливаем Tailwind его одноранговые зависимости, используя npm:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latestЗатем сгенерируйте свои(й) 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.config.js, настройте опцию purge, указав пути ко всем вашим Blade templates и JavaScript components, чтобы Tailwind мог изменять дерево неиспользуемых стилей в производственных сборках:
// tailwind.config.js
module.exports = {
- purge: [],
+ purge: [
+ './resources/**/*.blade.php',
+ './resources/**/*.js',
+ './resources/**/*.vue',
+ ],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}Прочтите наше отдельное руководство по оптимизации для продакшена, чтобы узнать больше о древовидных неиспользуемых стилях для лучшей производительности.
В свой webpack.mix.js добавьте tailwindcss в качестве плагина PostCSS:
// webpack.mix.js
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
+ require("tailwindcss"),
]);Откройте файл ./resources/css/app.css, который Laravel генерирует для вас по умолчанию
, и используйте директиву @tailwind, чтобы включить утилиты Tailwind base, components и utilities стили, заменяющие исходное содержимое файла:
/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;Tailwind заменит эти директивы во время сборки на все стили, которые он генерирует на основе вашей настроенной дизайн-системы.
Прочтите нашу документацию по добавлению базовых стилей, извлечению компонентов, и добавлению новых утилит для лучшие практики по расширению Tailwind с помощью вашего собственного CSS.
Затем импортируйте свою таблицу стилей в основной макет Blade (обычно resources/views/layouts/app.blade.php или аналогичный) и добавьте метатег адаптивного окна просмотра, если он еще не присутствует:
<!doctype 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>
<!-- ... --->Вы закончили! Теперь, когда ты бежишь npm run watch, npm run dev или npm run prod, Tailwind CSS будет готов к использованию в вашем проекте Laravel Mix.