TailwindCSS in NextJS installieren

Опубликовано: 31 Июль 2026
на канале: PixelComputers

In diesem Video zeige ich dir, wie du TailwindCSS in einem NextJS Projekt installierst und einrichtest. TailwindCSS stellt dir eine Vielzahl an Hilfsklassen bereit, mit denen du deine React-Komponenten einfach direkt im JSX stylen kannst.

#tailwindcss #tailwind #nextjs

———

📖 Kapitel:
0:00 - Intro
0:05 - Projekt erstellen
0:16 - Abhängigkeiten installieren
2:01 - Tailwind Directives hinzufügen
2:19 - Installation testen
3:26 - Outro

———

📋 Copy & Paste:

tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

Tailwind Directives:
@tailwind base;
@tailwind components;
@tailwind utilities;

———

📣 Social Media:
Instagram:   / pixelcomputersyt
Twitter:   / pixel_computers
Facebook:   / pixelcomputers-181072019107817

———

🎵 Musik:
Happy by MusicbyAden   / musicbyadencreative   Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0 (https://creativecommons.org/licenses/... Download / Stream: https://bit.ly/happy-musicbyadenMusic promoted by Audio Library    • Happy – MusicbyAden (No Copyright Music)

📸 Logos & Bilder:
Tailwind CSS, CC BY-SA 4.0 (https://creativecommons.org/licenses/..., via Wikimedia Commons
ZEIT, CC BY-SA 4.0 (https://creativecommons.org/licenses/..., via Wikimedia Commons