Пошаговый пример: Изменение дизайна главной страницы с помощью Tailwind CSS в Laravel 12

В этом руководстве мы рассмотрим, как изменить дизайн главной страницы в Laravel 12 с использованием Tailwind CSS. Мы также настроим сборку проекта с помощью Vite, который является стандартным сборщиком для Laravel.

Шаг 1: Установка Laravel 12

Если у вас еще не установлен Laravel 12, создайте новый проект:

composer create-project laravel/laravel laravel-tailwind-example
cd laravel-tailwind-example

Шаг 2: Установка Tailwind CSS

Установите Tailwind CSS и его зависимости через npm:

   npm install -D tailwindcss postcss autoprefixer

Инициализируйте конфигурационный файл Tailwind:

   npx tailwindcss init

Создайте файл tailwind.config.js и настройте его:

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

Создайте файл resources/css/app.css и добавьте директивы Tailwind:

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

Шаг 3: Настройка Vite для сборки Tailwind

Откройте файл vite.config.js и добавьте поддержку Tailwind:

   import { defineConfig } from 'vite';
   import laravel from 'laravel-vite-plugin';
   import tailwindcss from 'tailwindcss';

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

Убедитесь, что в resources/js/app.js импортируется ваш CSS-файл:

   import '../css/app.css';

Шаг 4: Подключение Tailwind в Blade-шаблоне

Откройте файл resources/views/welcome.blade.php (главная страница Laravel).
Подключите скомпилированный CSS-файл через Vite:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Laravel + Tailwind</title>
       @vite(['resources/css/app.css', 'resources/js/app.js'])
   </head>
   <body class="bg-gray-100">
       <div class="container mx-auto p-4">
           <h1 class="text-3xl font-bold text-center text-blue-600">
               Добро пожаловать в Laravel + Tailwind!
           </h1>
           <p class="mt-4 text-gray-700 text-center">
               Это пример главной страницы с использованием Tailwind CSS.
           </p>
           <button class="mt-6 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">
               Нажми меня
           </button>
       </div>
   </body>
   </html>

Шаг 5: Запуск сборки

Запустите сборку проекта с помощью Vite:

   npm run dev

Это запустит сервер разработки и будет отслеживать изменения в файлах.

Если вы хотите собрать проект для production, выполните:

   npm run build

Шаг 6: Запуск сервера Laravel

Запустите сервер Laravel, чтобы увидеть изменения:

php artisan serve

Откройте браузер и перейдите по адресу http://localhost:8000. Вы увидите главную страницу с новым дизайном, созданным с помощью Tailwind CSS.

Шаг 7: Кастомизация дизайна (опционально)

Вы можете изменить дизайн, добавляя или изменяя классы Tailwind в welcome.blade.php. Например:

Измените цвет фона: bg-gray-100 на bg-indigo-50.
Добавьте тень для контейнера: shadow-lg.
Сделайте кнопку больше: py-3 px-6.

Пример:

<div class="container mx-auto p-4 shadow-lg rounded-lg bg-indigo-50">
    <h1 class="text-4xl font-bold text-center text-indigo-800">
        Добро пожаловать в Laravel + Tailwind!
    </h1>
    <p class="mt-4 text-gray-700 text-center">
        Это пример главной страницы с использованием Tailwind CSS.
    </p>
    <button class="mt-6 bg-indigo-500 text-white py-3 px-6 rounded hover:bg-indigo-600">
        Нажми меня
    </button>
</div>

Заключение

Теперь вы знаете, как изменить дизайн главной страницы в Laravel 12 с помощью Tailwind CSS и настроить сборку с использованием Vite. Tailwind позволяет быстро создавать современные и адаптивные интерфейсы, а его интеграция с Laravel делает процесс разработки еще удобнее.

Попробуйте добавить больше элементов на страницу и поэкспериментируйте с утилитами Tailwind, чтобы лучше понять его возможности!