Jak nainstalovat Tailwind CSS v Laravelu (Vite & Mix)
Stručný přehled
- Laravel 9+ (Vite) používat Vite a Laravel
@viteSměrnice Blade. Výchozí pro moderní aplikace Laravel. - Laravel 8 a nižší (Mix / Webpack) používat Laravel Mix a
mix()Pomocník s čepelí.
Předpoklady
- Node.js (doporučená verze 12.13.0+).
- Existující projekt Laravel (nová instalace Laravelu je ve výchozím nastavení dodávána s nainstalovaným Tailwindem).
npminicializováno (npm installpřed spuštěním příkazů pro sestavení).
1. Instalace Tailwindu (společné kroky)
Spusťte v kořenovém adresáři projektu:
npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -pnpx tailwindcss init -p vytváří tailwind.config.js a postcss.config.js.
2. Konfigurace Tailwindu (cesty k šablonám)
Tailwind potřebuje vědět, které soubory má prohledávat kvůli třídám. Přidejte cesty ke zdrojům Laravel:
/** @type {import('tailwindcss').Config} */export default { content: [ './resources/**/*.blade.php', './resources/**/*.js', './resources/**/*.ts', './resources/**/*.vue', ], theme: { extend: {}, }, plugins: [],}Použijte
export default(ESM) ormodule.exports = { ... }(CommonJS) v závislosti na vaší sadě nástrojů. Tailwind akceptuje obě formy; výše uvedený příklad ESM odpovídá současným průvodcům Tailwindu.
3. Přidání direktiv Tailwindu do CSS
Vytvořit nebo přepsat resources/css/app.css s:
@tailwind base;@tailwind components;@tailwind utilities;To je nutné k tomu, aby Tailwind mohl do sestavení injektovat své vrstvy.
4. Vite (doporučujeme Laravel 9, 10, 11)
- Zajistěte, aby vaše
package.jsonskripty obsahují standardní skripty Vite (ve výchozím nastavení to dělá stub projektu Laravel):
"scripts": { "dev": "vite", "build": "vite build"}- Potvrďte
vite.config.jszahrnuje zásuvný modul Laravel a vaše vstupní body:
import { defineConfig } from 'vite'import laravel from 'laravel-vite-plugin' export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), ],})- Spusťte vývojový server:
npm run dev- V rozvržení Blade (např.
resources/views/layouts/app.blade.php) zahrnují aktiva s@vite:
<!doctype html><html><head> @vite(['resources/css/app.css', 'resources/js/app.js'])</head><body class="bg-gray-50"> <h1 class="text-3xl font-bold">Tailwind + Laravel (Vite)</h1></body></html>5. Laravel Mix (Laravel 8 a starší)
-
Nainstalujte Tailwind (stejně jako v části A).
-
Konfigurace
webpack.mix.jspoužívat Tailwind jako zásuvný modul PostCSS. Průvodce Tailwind ukazuje použití@tailwindcss/postcsspomocník pro Mix:
const mix = require('laravel-mix') mix .js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ require('@tailwindcss/postcss'), ])- Run Mix:
npm run dev# ornpm run production- Zahrnout zkompilované prostředky do aplikace Blade pomocí
mix():
<link rel="stylesheet" href="{{ mix('css/app.css') }}"><script src="{{ mix('js/app.js') }}"></script>6. postcss.config.js (co -p vytváří)
Typické postcss.config.js vytvořil npx tailwindcss init -p:
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, },}Používá se ve Vite i v Mixu (integrace s PostCSS).
7. Rychlé ověření a řešení problémů
- Pokud se nástroje nezobrazí, potvrďte
contentcesty zahrnují všechny vaše soubory Blade/JS/TS/Vue a znovu je sestaví. - Restartování vývojového serveru po změně
tailwind.config.js. - Zajistěte, aby váš soubor CSS s
@tailwindje ve skutečnosti importován vaším bundlerem (Viteinputnebo MixpostCss). - Pro produkční sestavy spusťte
npm run build(Vite) nebonpm run production(Mix).
8. Úryvek testu ostří (rychlý kouřový test)
Přidejte tuto funkci do libovolného zobrazení Blade a ověřte vykreslování tříd:
<div class="min-h-screen flex items-center justify-center bg-gray-100"> <div class="p-8 bg-white rounded shadow"> <h2 class="text-2xl font-semibold text-sky-600">Tailwind is working</h2> <p class="mt-2 text-sm text-gray-600">If you see this styled, Tailwind is active.</p> </div></div>Závěr
Tento článek obsahuje přesné příkazy a konfiguraci pro instalaci Tailwind CSS do projektů Laravel pomocí. Vite (doporučeno pro Laravel 9+) a Mix (dědictví).