ru:https://highload.today/blogs/frejmvork-kotoryj-uskorit-rabotu-kak-ustanovit-tailwind-v-laravel-proekt/ ua:https://highload.today/uk/blogs/frejmvork-kotoryj-uskorit-rabotu-kak-ustanovit-tailwind-v-laravel-proekt/
logo
Веб-разработка      22/12/2021

Фреймворк, который ускорит работу: как установить Tailwind в Laravel-проект

Сергей Гришечкин BLOG

Backend Developer во FlexMade

Устанавливаем Tailwind в Laravel-проект

Для этого прописываем:

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

Онлайн-курс "Лідогенерація у B2B" від Laba.
Де шукати нових клієнтів, щоб збільшити дохід компанії та які інструменти лідогенерації застосовувати? Розбираємо покроково та комплексно.
Дізнатись більше про курс
@import url(‘https://fonts.googleapis.com/css?family=Nunito');
@import ‘variable;
@import ‘~bootstrap/scss/bootstrap’;

И замените их на следующие:

@tailwind base;
@tailwind components;
@tailwind utilities;
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: []
}
const mix = require(‘laravel-mix’);
const tailwindcss = require(‘tailwindcss’);
mix.js(‘resources/js/app.js’, ‘public/js’)
.sass(‘resources/sass/app.scss’, ‘public/css’)
.options({
processCssUrls: false,
postCss: [ tailwindcss(‘tailwind.config.js’) ],
});
npm install
npm run dev

Этим мы скомпилировали код и добавили tailwind-стили в public/css/app.css.

Тестируем результат

Наш фреймворк готов к работе. Осталось протестировать результат. Для этого просто добавим пример из документации в файл:

resources/views/welcome.blade.php

Курс English For Tech: Speaking&Listening від Enlgish4IT.
Після курсу ви зможете найкраще презентувати свої досягнення, обговорювати проекти та вирішувати повсякденні завдання англійською мовою. Отримайте знижку 10% за промокодом TCENG.
Дізнатись про курс

Убедитесь, что в шаблоне подключены стили:

<link href=”{{ asset(‘css/app.css’) }}” rel=”stylesheet”>

И добавьте в файл следующий фрагмент:

<div class=”max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden”>
<div class=”sm:flex sm:items-center px-6 py-4">
<img class=”block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full” src=”https://randomuser.me/api/portraits/women/17.jpg" alt=”Woman’s Face”>
<div class=”mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left”>
<p class=”text-xl leading-tight”>Erin Lindford</p>
<p class=”text-sm leading-tight text-gray-600">Customer Support Specialst</p>
<div class=”mt-4">
<button class=”text-purple-500 hover:text-white hover:bg-purple-500 border border-purple-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal”>Message</button>
</div>
</div>
</div>
</div>

Читайте также: Как написать одностраничное приложение на Laravel и Vue.js за 45 минут

Это текст из личного блога, опубликованный с разрешения автора.

Онлайн-курс "Управління ІТ-командами" від Laba.
Прокачайте свої soft- і hard-скіли в управлінні кількома IT-командами, отримайте практичні стратегії та інструменти ефективного team-ліда.
Програма курсу і реєстрація

If you have found a spelling error, please, notify us by selecting that text and pressing Ctrl+Enter.

Онлайн-курс "Лідогенерація у B2B" від Laba.
Де шукати нових клієнтів, щоб збільшити дохід компанії та які інструменти лідогенерації застосовувати? Розбираємо покроково та комплексно.
Дізнатись більше про курс

Этот материал – не редакционный, это – личное мнение его автора. Редакция может не разделять это мнение.

Ваша жалоба отправлена модератору

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: