Setting up Tailwind CSS in a Next.js Project

After that, I'll walk you through the step-by-step manual implementation. Along the way, we'll spend some time understanding how to set up the `content` configuration properly in the Tailwind config file.

Enjoy!

[azuraflame]

Thank you this was very straight forward with no extra unnecessary material. very helpful!

[piyush]

Thank you so much for clear instructions, I wished the official docs had this type of clear instructions.

[codeNameMoose]

This was beautifully perfect, Simon. Thank you! 🎉 You just got yourself a new subscriber! 😊

[dragidavid]

Looking forward to the upcoming videos! 😄 been a while

[maresal]

Great video. Can you share your vscode configs & theme?

[MichaelShingo]

so easy, even setting it up after Nextjs installation.

[TheMoviesManX]

Thank you so much! a quick question, how do you preview your app through vscode?

[TechWrathTV]

You should add TYPE SCRIPT in the title as well as if someone wants to use JS they can use with-tailwindcss-emotion

[assiajeanngoran]

Good video Simon. Thks ! Please what is your vs code font 😁 i found it very cool 😊👌🏽

[nitijjhangra]

This is very basic. How about watching and building page specific css files?

[aim]

what is name this editor it`s looks cool

[sexy_audios]

How to install this with javascript? not typescript

I'm getting this error when I try to run dev
error -
Error: Cannot find module 'xwind/babel'

[brandonr]

when I make the project I only get a readme file and a gitignore

[JeffreyP]

I've been trying to upgrade ever since v3 was released and didn't work. Had success with new builds but couldn't make it work with storybook because of JIT. I'm now reattempting to upgrade on another project and it seems only tailwind utilities work. Is anybody else experiencing the same issue?

[japarradog]

🎯 Key Takeaways for quick navigation:

00:00 🚀 *Configuración rápida de Tailwind CSS en un proyecto Next.js*
- Creación y configuración inicial rápida de un proyecto Next.js con Tailwind CSS.
- Uso del ejemplo preconfigurado con Tailwind CSS para una integración inmediata.
01:09 🔧 *Configuración manual de Tailwind CSS en Next.js*
- Pasos detallados para instalar y configurar manualmente Tailwind CSS en un proyecto Next.js.
- Creación de archivos de configuración de Tailwind CSS y PostCSS.
- Personalización de Tailwind CSS para adaptarse a las necesidades específicas del proyecto.
03:02 📁 *Configuración avanzada de archivos de contenido en Tailwind*
- Uso de patrones globales para simplificar la configuración de archivos de contenido en Tailwind CSS.
- Explicación sobre cómo incluir múltiples extensiones de archivos y directorios en la configuración de Tailwind.
04:12 ✨ *Aplicación de Tailwind CSS en el proyecto*
- Implementación de las directivas de Tailwind CSS en el archivo CSS global.
- Demostración de la aplicación de utilidades de Tailwind CSS en una página de ejemplo.

Made with HARPA AI

[juanguerra]

Manual setup didn't work for me. I need it in that way because I'm using JavaScript instead of TypeScript! Any idea? Thanks!

[vahidsediqi]

when i type npx create-next-app --example with-tailwindcss with-tailwindcss-app it creates nextjs app with typsctipt

[mrattitude]

grid utilities are not working can you please help

[suphawatwong]

you forgot to mention that you need to import 'globals.css' file to '_app.tsx' file . . . .