Morioh
Login
André Schürrle

André Schürrle

11 months ago

So installieren Sie Tailwind CSS 3 in Laravel 9 mit Vite 3

In diesem Tutorial erfahren Sie, wie Sie Tailwind CSS 3 in Laravel 9 mit Vite 3 installieren. Tailwind CSS ist ein Utility-First-CSS-Framework, das Ihnen helfen kann, Ihren Entwicklungsprozess zu beschleunigen. Vite ist ein modernes Build-Tool, mit dem Sie blitzschnelle Webanwendungen erstellen können.

Um Tailwind CSS 3 in Laravel 9 mit Vite 3 zu installieren, folgen wir diesen Schritten

  • Schritt 1: Laravel-Projekt installieren
  • Schritt 2: Tailwind CSS einrichten
  • Schritt 3: Fügen Sie Tailwind CSS zu app.css hinzu
  • Schritt 4: Vite-Assets in Laravel Blade importieren
  • Schritt 5: Führen Sie den Vite Development Server aus
  • Schritt 6: Führen Sie den Laravel Development Server aus
     

Schritt 1: Laravel-Projekt installieren

Installieren Sie eine neue Laravel-Anwendung. Gehen Sie also zum Terminal, geben Sie den Befehl ein und erstellen Sie eine neue Laravel-App.

composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-tailwind3-vite3

oder, wenn Sie den Laravel Installer als globale Composer-Abhängigkeit installiert haben:

laravel new laravel9-tailwind3-vite3

Schritt 2: Tailwind CSS einrichten

Als nächstes müssten wir Rückenwind und seine Abhängigkeiten (PostCSS und Auto-Präfixer) installieren.

npm install -D tailwindcss postcss autoprefixer

Generieren Sie Tailwind und veröffentlichen Sie CSS-Konfigurationsdateien.

npx tailwindcss init -p

Dadurch werden zwei Dateien in Ihrem Stammverzeichnis erstellt:  tailwind.config.js und  postcss.config.js. In der Tailwind-Konfigurationsdatei fügen Sie Anpassungen und Designs für Ihre App hinzu. Hier teilen Sie Tailwind auch mit, in welchen Pfaden nach Ihren Seiten und Komponenten gesucht werden soll. Es sieht ungefähr so ​​aus:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Als nächstes müssen Sie einen Vorlagenpfad in tailwind.config.js hinzufügen.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Schritt 3: Fügen Sie Tailwind CSS zu app.css hinzu

resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

resources/css/app.css In vite.config.js entfernen 

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Als nächstes müssen Sie Ihr CSS über JavaScript importieren. Normalerweise erfolgt dies in der  resources/js/app.js Datei Ihrer Bewerbung:

resources/js/app.js

import './bootstrap';
import '../css/app.css'

Schritt 4: Vite-Assets in Laravel Blade importieren

resources/views/welcome.blade.php

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>How to Install Tailwind CSS 3 in Laravel 9 With Vite 3 - TechvBlogs</title>

        @vite('resources/js/app.js')
    </head>

    <body class="antialiased">
        <div class="flex justify-center items-center h-screen">
            <h1 class="text-3xl text-purple-600 font-bold">How to Install Tailwind CSS 3 in Laravel 9 With Vite 3 - TechvBlogs</h1>
        </div>
    </body>

</html>

Schritt 5: Führen Sie den Vite Development Server aus

Führen Sie den folgenden Befehl aus, um den Vite Development-Server zu starten:

npm run dev

Schritt 6: Führen Sie den Laravel Development Server aus

php artisan serve

Viel Spaß beim Codieren!!!

1.00 GEEK