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

Англійська для початківців.
Для тих, хто тільки починає вивчати англійську і хоче вміти використовувати базову лексику і граматику.
Реєстрація на курс
@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

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

<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 минут

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

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

Онлайн-курс Pyton.
Опануйте PYTHON з нуля та майте проект у своєму портфоліо вже через 4 місяця.
Приєднатися

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

Топ-5 самых популярных блогеров марта

Founder at Shallwe, Python Software Engineer (Django/React)
Всего просмотровВсего просмотров
95
#1
Всего просмотровВсего просмотров
95
Career Consultant в GoIT
Всего просмотровВсего просмотров
90
#2
Всего просмотровВсего просмотров
90
CEO & Founder в Trustee
Всего просмотровВсего просмотров
43
#3
Всего просмотровВсего просмотров
43
Рейтинг блогеров

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

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

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