Как использовать Tailwind CSS с Laravel

На чтение3 мин

Обновлено1 год назад

Просмотров

Tailwind — это современный CSS-фреймворк. Это платформа, в которой основное внимание уделяется утилитам, и она предоставляет вам уникальный набор служебных классов, что делает процесс разработки очень простым и приводит к созданию уникального дизайна. CSS, ориентированный на утилиты, быстр, надежен и очень эффективен, что упрощает кодирование. CSS Tailwind также не самоуверен; это означает, что вы совершенно свободны в настройке дизайна и компонентов веб-сайта.

Laravel — это полноценная среда для разработки приложений. Это PHP-фреймворк с открытым исходным кодом, в котором разработка надежна и проста. Самое главное, что при использовании Tailwind CSS с Laravel легко поддерживать качество кода по сравнению с пользовательским CSS.

Установка фреймворка Tailwind не проста, как установка фреймворка начальной загрузки, она требует небольшой настройки с помощью laravel Mix. В этом посте мы узнаем, как установить фреймворк tailwind внутри нашего проекта laravel.

Создание проекта Laravel

Сначала откройте Терминал и выполните следующую команду, чтобы создать новый проект Laravel:

composer create-project --prefer-dist laravel/laravel tailwind-laravel

или, если вы установили установщик Laravel как глобальную зависимость composer:

laravel new tailwind-laravel

Установка Tailwind через NPM

Сначала давайте установим зависимости NPM

npm install

Теперь установите Tailwind CSS через npm.

npm install tailwindcss

Добавление Tailwindcss в `resources/sass/app.scss`

Вам не нужно устанавливать autoprefixer или postcss-import, поскольку они уже установлены вместе с laravel mix.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

Создание файла конфигурации Tailwind.

Далее нам нужно сгенерировать файл конфигурации tailwind. Эта заливка будет использоваться laravel mix (webpack) при преобразовании файла scss в CSS.

Выполните следующую команду, чтобы создать файл конфигурации.

npx tailwindcss init

Включение Tailwind в процесс сборки Laravel Mix

Далее нам нужно указать Laravel Mix (который внутри использует webpack) скомпилировать sass tailwind с использованием файла конфигурации tailwind.

Откройте webpack.mix.js файл и внесите следующие изменения.

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js');
    
const tailwindcss = require('tailwindcss')

mix.sass('resources/sass/app.scss', 'public/css')
   .options({
      processCssUrls: false,
      postCss: [ tailwindcss('tailwind.config.js') ],
})

Откройте resources/views/welcome.blade.php файл и внесите следующие изменения.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel + Tailwind CSS - TechvBlogs</title>

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

        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        <script src="{{ mix('js/app.js') }}"></script>
    </head>
    <body class="antialiased">
        <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0">
            <div class="w-full max-w-xs">
                <h1 class="text-center text-2xl mb-3">Tailwind Laravel TechvBlogs</h1>
                <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
                            Username
                        </label>
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
                    </div>
                    <div class="mb-4">
                        <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                            Password
                        </label>
                        <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
                    </div>
                    <div class="mb-2">
                        <button class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
                            Sign In
                        </button>
                    </div>
                    <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
                        Forgot Password?
                    </a>
                </form>
                <div class="text-center">
                    <a class="text-blue-500 hover:text-blue-800 hover:underline" href="https://techvblogs.com/blog/tailwind-css-with-laravel?ref=code" target="_blank">Read Blog</a>
                </div>
            </div>
        </div>
    </body>
</html>

Запустите NPM

Теперь мы готовы запустить процесс сборки npm, выполните следующую команду в вашем терминале/командной строке.

npm run dev

Теперь пришло время запустить наш проект.

php artisan serve

Готово, спасибо за прочтение.

#Laravel #CSS #TailwindCSS