Настройка Tailwindcss 3 в Laravel 10 с использованием Vite

Создание современных веб-сайтов с помощью Tailwndcss в Laravel с использованием Vite

В этой статье мы настроим Tailwindcss для внешнего интерфейса приложения Laravel с использованием Vite. Эта настройка работает для более новых установок Laravel, но в демонстрационных целях в этой статье используется Laravel 10.

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

Ларавель

Laravel — наиболее широко используемый и популярный PHP-фреймворк для создания пользовательских, надежных и масштабируемых веб-приложений.

Laravel 10 был выпущен 14 февраля 2023 года потрясающей командой Laravel во главе с Taylor Otwell с минимальной поддержкой PHP 8.1.

Laravel v10 — это вторая TS (долгосрочная поддержка), которая будет введена после 12-месячного цикла выпуска, и будет стабильной в течение 12 месяцев до следующего выпуска, скорее всего, в феврале или (1 квартале) 2024 года……… Все о Laravel 10: глубокое погружение в новейшие функции Laravel 10 от Alemoh Rapheal Baja

Попутный ветер

flex, pt-4, text-center и rotate-90 — это лишь некоторые из классов в Tailwindcss (первоначально утилитарная CSS-инфраструктура), которые можно комбинировать для создавайте любой дизайн прямо в вашей разметке.

Соответствующие стили, найденные Tailwindcss при сканировании файлов HTML, компонентов Javascript и любых других шаблонов для имен классов, записываются в статический файл css.

Это быстро, гибко и надежно — с нулевым временем выполнения. — Документы Tailwindcss

Вы можете получить готовые к использованию шаблоны и компоненты со следующих сайтов.

Вите

Vite (французское слово, означающее «быстрый», произносится как /vit/, как и «veet») — это инструмент сборки, который предлагает современным веб-проектам более быструю и экономичную разработку. Согласно документации Vite Guide, он состоит из двух основных частей:

Вы можете найти больше информации о Vite в документации

Демонстрационное приложение

давайте начнем с новой установки приложения Laravel 10

laravel new laravel10_tailwindcss_using_vite

composer create-project laravel/laravel10_tailwindcss_using_vite

Идет установка….

Все хорошо готово делать удивительные вещи!

Обслуживайте приложение с помощью команды artisan с любым портом по вашему выбору

php artisan serve --port=8001

Вот так….

Laravel 10.9.0 (PHP v8.1.12)

Так же, как микс Laravel, Vite можно использовать для объединения ресурсов, и в дальнейшем он заменил Laravel Mix в более новых установках Laravel. Для получения дополнительной информации об интеграции Vite для различных фреймворков и пользовательских css посетите Документацию по интеграции Laravel vite.

Перейдите к терминалу, чтобы установить Tailwindcss, postcss и autoprefixer, используя любой менеджер пакетов по вашему выбору…

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

Команда npx tailwindcss init -p автоматически создает файл конфигурации Tailwindcss

Измените содержимое, как показано ниже, чтобы включить все пути к файлам шаблонов.

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

Добавьте директивы Tailwindcss в app.css в каталоге папки ресурсов.

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

Запустите приведенную ниже команду, чтобы начать процесс сборки — в зависимости от используемого менеджера пакетов.

npm run dev

Все хорошо…..

Так же, как микс Laravel, где APP_URL используется для предоставления обновлений после перестроения ресурсов, когда есть изменения …. (синхронизация с браузером)

Измените env APP_URL на URL-адрес приложения на вашем компьютере.

APP_URL=http://127.0.0.1:8001

Предоставьте приложение с помощью параметра —host в команде диспетчера пакетов с соответствующим портом APP_URL.

npm run dev --host=8001

Эй, объединение активов здесь происходит очень быстро.

на порту localhost: 5173 показывает вводную страницу по умолчанию о приложении

port :8001 — это порт, указанный в команде artisan serve

http://127.0.0.1:8001

Он показывает приложение, которое в данном случае является страницей приветствия.

Включите скомпилированный css в любой блейд-файл или файл пользовательского макета, используя директиву @.

Добавление директивы @ vite в файл welcome.blade.php со стилем Tailwindcss из Tailblocks

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Tailwindcss 3 in Laravel 10 with Vite</title>

    <!-- Fonts -->
    <link href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">

    @vite('resources/css/app.css')

</head>

<body class="antialiased">

    <section class="text-gray-600 body-font">
        <div class="container px-5 py-24 mx-auto">
            <div class="flex flex-col">
                <div class="h-1 bg-gray-200 rounded overflow-hidden">
                    <div class="w-24 h-full bg-indigo-500"></div>
                </div>
                <div class="flex flex-wrap sm:flex-row flex-col py-6 mb-12">
                    <h1 class="sm:w-2/5 text-gray-900 font-medium title-font text-2xl mb-2 sm:mb-0">Space The Final Frontier</h1>
                    <p class="sm:w-3/5 leading-relaxed text-base sm:pl-10 pl-0">Street art subway tile salvia four dollar toast bitters selfies quinoa yuccie synth meditation iPhone intelligentsia prism tofu. Viral gochujang bitters dreamcatcher.</p>
                </div>
            </div>
            <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4">
                <div class="p-4 md:w-1/3 sm:mb-0 mb-6">
                    <div class="rounded-lg h-64 overflow-hidden">
                        <img alt="content" class="object-cover object-center h-full w-full" src="https://dummyimage.com/1203x503">
                    </div>
                    <h2 class="text-xl font-medium title-font text-gray-900 mt-5">Shooting Stars</h2>
                    <p class="text-base leading-relaxed mt-2">Swag shoivdigoitch literally meditation subway tile tumblr cold-pressed. Gastropub street art beard dreamcatcher neutra, ethical XOXO lumbersexual.</p>
                    <a class="text-indigo-500 inline-flex items-center mt-3">Learn More
                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
                            <path d="M5 12h14M12 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>
                <div class="p-4 md:w-1/3 sm:mb-0 mb-6">
                    <div class="rounded-lg h-64 overflow-hidden">
                        <img alt="content" class="object-cover object-center h-full w-full" src="https://dummyimage.com/1204x504">
                    </div>
                    <h2 class="text-xl font-medium title-font text-gray-900 mt-5">The Catalyzer</h2>
                    <p class="text-base leading-relaxed mt-2">Swag shoivdigoitch literally meditation subway tile tumblr cold-pressed. Gastropub street art beard dreamcatcher neutra, ethical XOXO lumbersexual.</p>
                    <a class="text-indigo-500 inline-flex items-center mt-3">Learn More
                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
                            <path d="M5 12h14M12 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>
                <div class="p-4 md:w-1/3 sm:mb-0 mb-6">
                    <div class="rounded-lg h-64 overflow-hidden">
                        <img alt="content" class="object-cover object-center h-full w-full" src="https://dummyimage.com/1205x505">
                    </div>
                    <h2 class="text-xl font-medium title-font text-gray-900 mt-5">The 400 Blows</h2>
                    <p class="text-base leading-relaxed mt-2">Swag shoivdigoitch literally meditation subway tile tumblr cold-pressed. Gastropub street art beard dreamcatcher neutra, ethical XOXO lumbersexual.</p>
                    <a class="text-indigo-500 inline-flex items-center mt-3">Learn More
                        <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
                            <path d="M5 12h14M12 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </section>


</body>
</html>

При любом изменении он автоматически перестраивает ассет и обновляет браузер, но на этот раз быстрее, чем любые известные вам до сих пор связывающие ассеты…

Обновление дисплея браузера со скоростью

С нетерпением жду удивительных вещей с Vite в Laravel!!!

Заключение

Благодаря интеграции Vite в более новых версиях установки Laravel процесс разработки внешнего интерфейса вашего приложения с использованием Tailwindcss (в первую очередь служебных CSS-фреймворков) ускоряется.

Твиттер: Алемсбая | Youtube: Tech with Alemsbaja, чтобы быть в курсе новых статей.

Находите это полезным или находчивым?? пожалуйста, поделитесь и не стесняйтесь использовать раздел комментариев для вопросов, ответов и предложений.

Первоначально опубликовано на https://alemsbaja.hashnode.dev.

Настройка Tailwindcss 3 в Laravel 10 с использованием Vite