Instalace Tailwind CSS v Laravelu pomocí Vite nebo Mix

Jak nainstalovat Tailwind CSS v Laravelu (Vite & Mix) Stručný přehled Laravel 9+ (Vite) používat Vite a Laravel @vite Směrnice Blade. Výchozí pro moderní aplikace Laravel. La...

Poptat web
Přejít na recenze Přejít na reference

08. 10. 2025

Instalace Tailwind CSS v Laravelu pomocí Vite nebo Mix

Jak nainstalovat Tailwind CSS v Laravelu (Vite & Mix)

Stručný přehled

  • Laravel 9+ (Vite) používat Vite a Laravel @vite Smě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).
  • npm inicializováno (npm install př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 autoprefixer
npx tailwindcss init -p

npx 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) or module.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)

  1. Zajistěte, aby vaše package.json skripty obsahují standardní skripty Vite (ve výchozím nastavení to dělá stub projektu Laravel):
"scripts": {
  "dev": "vite",
  "build": "vite build"
}
  1. Potvrďte vite.config.js zahrnuje 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,
    }),
  ],
})
  1. Spusťte vývojový server:
npm run dev
  1. 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ší)

  1. Nainstalujte Tailwind (stejně jako v části A).

  2. Konfigurace webpack.mix.js používat Tailwind jako zásuvný modul PostCSS. Průvodce Tailwind ukazuje použití @tailwindcss/postcss pomocní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'),
  ])
  1. Run Mix:
npm run dev
# or
npm run production
  1. 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 content cesty 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 @tailwind je ve skutečnosti importován vaším bundlerem (Vite input nebo Mix postCss).
  • Pro produkční sestavy spusťte npm run build (Vite) nebo npm 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í).

Původní článek publikoval Nabil Hassen.