Tailwind v Laravel projektu

Tailwind je poměrně nový CSS utility framework, který se rychle stal velmi populárním. Za jeho vývojem stojí především Adam Wathan, známá osobnost ze světa Laravelu, a Steve Schoger, skvělý webový designér. Výsledkem je framework, který pracuje s moderním CSS, je intuitivní a dá se rychle naučit.

Úvod

Existuje celá řada CSS frameworků jako jsou Bootstrap nebo Bulma, které fungují perfektně, a umožňují sjednotit styl celé aplikace. Nicméně v případě, kdy potřebujeme nějakou část upravit nebo naopak něco nového přidat, začíná koloběh vyhledávání a zkoušení různých rad a triků, které najdeme, a často to končí tím, že část kódu zkopírujeme a ačkoliv tomu moc nerozumíme, hlavně že to funguje. Na druhé straně je čisté CSS, které nám dává absolutní volnost. Problém ale vzniká především během delšího vývoje aplikace, kdy už netušíme, jaké části stylů se používají, jestli dané styly už neexistují a vznikají tak čast duplicitní styly, které často mírně upravují původní styl (barva, odsazení, velikost apod.). Prostředníkem mezi těmito možnostmi je právě utility framework, který kombinuje obojí. Na jednu stranu nám umožňuje využívat předdefinované styly (resp. třídy), na druhou stranu máme absolutní volnost v tom, jak si komponentu nastylujeme a co budeme používat. Na oficiální stránkách Tailwindu najdete velmi detailní popis, jak framework nainstalovat a jaké třídy můžeme používat, nicméně v tom článku si ukážeme, jak vše jednoduše rozchodit v Laravel aplikaci a začít Tailwind používat.

Instalace

Úplně nejjednoduším způsobem, jak v aplikaci rozchodit Tailwind, je samozřejmě použít CDN odkaz. Tím okamžitě získáte přístup ke třídám, avšak nebudete si moct jakkoliv upravovat styly, využívat direktivy, instalovat pluginy atd. V tomto návodu budu používat npm (případný postup instalace najdete na jejich oficiální stránkách). Jako první si nainstalujeme všechny balíčky, které Laravel defaultně obsahuje:

npm install

Dále nainstalujeme samotný CSS framework:

 npm install tailwindcss 

Dalším krokem je vytvoření konfiguračního souboru. Při nainstalování balíčku tailwindcss se nainstaloval také Tailwind Cli, který nám umožňuje konfiguraci vytvořit velmi jednoduše. Opět v příkazovém řádku v kořenu Laravel aplikace zavolejte příkaz:

npx tailwind init

To nám v kořenu aplikace vytvoří minimalistiký soubor tailwind.config.js s tímto obsahem:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

Pokud bychom chtěli vygenerovat soubor s jiným názvem, stačí zavolat

npx tailwind init tailwindcss-config.js

A pro vygenerování celé konfigurace včetně všech tříd

npx tailwind init --full

Laravel mix, SASS a kompilace

Abychom mohli Tailwind využívat v aplikaci, je potřeba ho první zkompilovat. To lze provést velmi snadno pomocí Laravel Mixu. Ve výchozím nastavení Laravel aplikace již obsahuje v package.json balíček laravel-mix, tudíž bychom ho již měli mít nainstalovaný. V případě, že ho z nějakého důvodu nemáme, stačí ho doinstalovat:

npm install laravel-mix --save-dev
cp node_modules/laravel-mix/setup/webpack.mix.js ./

Dále pro práci s CSS soubory budeme používat SASS, který nám práci s CSS velmi usnadňuje a pomocí Laravel mixu ho lze lehce zkompilovat do čistého CSS kódu. Laravel ho navíc opět obsahuje ve výchozím nastavení a měli bychom ho mít již nainstalovaný. Jako výchozí CSS soubor ke zkompilování budeme využívat již vytvořený soubor (případně si ho vytvořte) resources/sass/app.scss. Defaultně tam najdeme předvyplněné styly, které ale nebudeme potřebovat. Obsah tedy můžete nahradit tímto:

@tailwind base;

@tailwind components;

@tailwind utilities;

Obsah si vysvětlíme až později, aktuálně si s tím nelámejte hlavu.

Když máme připravený SASS, přejdeme k samotnému zkompilování pomocí Laravel mixu. Konfigurační soubor ./webpack.mix.js si upravíme podle našich potřeb:

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

require('mix-tailwindcss');

mix.sass('resources/sass/app.scss', 'public/css')
    .tailwind('./tailwind.config.js');

Kód není nijak složitý. Jako první si do proměnné mix uložíme instanci balíčku laravel-mix. Abychom mohli využívat Tailwind metod, je potřeba si také vyžádat nainstalový balíček s CSS frameworkem. Následuje ta nejdůležitější "magie". Pomocí mixu si zkompilujeme SASS v souboru resources/sass/app.scss a výsledek si uložíme do public/css/app.css. Poté si zavoláme tailwind medotu, která nám do app.css vygeneruje celý obsah frameworku, který budeme v aplikaci používat. Kompilaci zavoláme příkazem:

npm run dev

Tailwind v projektu

V minulé části jsme si vygenerovali zkompilovaný CSS soubor. Nyní není nic jednoduššího, než si ho v aplikaci v <header> sekci přidat:

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

Od teď můžeme v aplikaci naplno využívat Tailwind, například takto:

 <h1 class="my-8 p-4 text-3xl md:text-4xl lg:text-5xl font-medium text-center">Hlavní nadpis</h1>

Vlastní nastavení stylů

Předdefinované Tailwind třídy můžeme využívat, avšak nikdo nám je nenutí. Pokud bychom si je potřebovali upravit podle vlastních potřeb, pak stačí v tailwind.config.js si třídy upravit a poté znovu vše zkompilovat. Stejně tak si můžeme vytvořit vlastní klasické CSS a přidat si své styly. Celkem velkou výhodou je zkombinování možnosti SASS a Tailwindu. V souboru resources/sass/app.scss jsme si definovali tři části. Pro nás bude nejvíce zajímavá sekce @tailwind components;. Právě v této sekci (resp. mezi sekcí components a utilities) můžeme zapisovat vlastní SASS styly a současně využívat Tailwind třídy. Například:

.card {
    @apply .shadow-lg .rounded .mt-4 .mb-0 .mx-2 .flex .flex-col .justify-between;
    @screen lg {
        @apply .w-1/2;
    }
}

Výsledkem je tento zkompilovaný kód:

.card {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
    border-radius: .25rem;
    margin: 1rem .5rem 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media (min-width: 1024px) {
    .card {
        width: 50%
    }
}