🎯 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
If the manual setup is not working for you, you're probably missing one step or doing something wrong. You can always use the `with-tailwindcss` example and change the files from TS to JS, remove the type annotations, delete the TS config, and you're good to go 👍
@@simonswiss please i tried doing it manually but couldn't add the directives to my css indicating error(unknown at rule @tailwind why?. i tried with-tailwindcss but installed typescript please how can i solve the error or change the typescript to javascript
To anyone watching the video now, his method of installation will no longer work. Run the command below and configure your project accordingly. npx create next-app --typescript
@@dyslexicunt I followed a video that showed installation line by line, but still didn't work. I made sure I had node is latest version, did the npm stuff. Still issues. Do you use Mac or PC?
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?
Make sure the path to Storybook's stories (and file extensions!) are set up properly in your content array. 99.999% of JIT issues are due to a wrong content configuration.
Yep, the Tailwind CSS example uses TypeScript. If I want a project without TypeScript, I find myself doing the "manual" install, which still only takes a minute or so.
No need to, the globals.css file already exists in the fresh new Next.js project, and it's already imported. I just change the contents of this file at the 4:13 mark in this video 👍
GREAT content bro, thanks man. BTW, I ain't even gay man, but damn, you're a handsome dude! Must be all that VIKING DNA over there in Northern Europe! Victory OR Valhalla! SKOL my NORDIC brothers, let's march and bring the BEARSERKERS, we are gonna party with the hot village chix! ahahaha
Thank you this was very straight forward with no extra unnecessary material. very helpful!
Thank you so much for clear instructions, I wished the official docs had this type of clear instructions.
This was beautifully perfect, Simon. Thank you! 🎉 You just got yourself a new subscriber! 😊
Thank you! Glad you enjoyed the tutorial!
Was already missing your videos! 😅
Haha, it's been a while!
🎯 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
Excellent 🔥
so easy, even setting it up after Nextjs installation.
straight tutorial ever, exelent
Looking forward to the upcoming videos! 😄 been a while
Thank you !
You're welcome!
Another great one!
🙏 I've got some more coming with different frameworks!
@@simonswiss Awesome. This is motivation for me
Thank you so much! a quick question, how do you preview your app through vscode?
You can use Live Preview for that: marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
Thank you for this sir
Manual setup didn't work for me. I need it in that way because I'm using JavaScript instead of TypeScript! Any idea? Thanks!
If the manual setup is not working for you, you're probably missing one step or doing something wrong. You can always use the `with-tailwindcss` example and change the files from TS to JS, remove the type annotations, delete the TS config, and you're good to go 👍
@@simonswiss please i tried doing it manually but couldn't add the directives to my css indicating error(unknown at rule @tailwind why?. i tried with-tailwindcss but installed typescript please how can i solve the error or change the typescript to javascript
It's just VS code settings 😌
Thank you Simon 🙏🏻
You're welcome!
Good video Simon. Thks ! Please what is your vs code font 😁 i found it very cool 😊👌🏽
It's called Dank Mono ✨
I'm getting this error when I try to run dev
error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Cannot find module 'xwind/babel'
I'm facing the same issue🥲🥲
To anyone watching the video now, his method of installation will no longer work.
Run the command below and configure your project accordingly.
npx create next-app --typescript
Great video thanks.
Great video. Can you share your vscode configs & theme?
what is name this editor it`s looks cool
You should add TYPE SCRIPT in the title as well as if someone wants to use JS they can use with-tailwindcss-emotion
when I make the project I only get a readme file and a gitignore
Thank you
This is very basic. How about watching and building page specific css files?
I just can't tailwind to work and i've been try to install it for 5 days. I just does nothing with the html...Can you help?
What's your project setup?
I have visual studio running on a Mac. For some bizarre reason, this reply was sent to me today. Good old UT
@@proteus1 - Did you get it working?
@@dyslexicunt I followed a video that showed installation line by line, but still didn't work. I made sure I had node is latest version, did the npm stuff. Still issues. Do you use Mac or PC?
It’s not working. The utility classes do nothing, and Visual Studio Code doesn’t recognize “@tailwind”.
grid utilities are not working can you please help
Hard to help on a TH-cam comment. Can you create a Tailwind Play showing what doesn't work, and share the link? I'll take a look!
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?
Make sure the path to Storybook's stories (and file extensions!) are set up properly in your content array. 99.999% of JIT issues are due to a wrong content configuration.
@@simonswiss purge path location was working on v2, when transitioned to v3 only utilities worked. Thanks for the response
when i type npx create-next-app --example with-tailwindcss with-tailwindcss-app it creates nextjs app with typsctipt
Yep, the Tailwind CSS example uses TypeScript. If I want a project without TypeScript, I find myself doing the "manual" install, which still only takes a minute or so.
you forgot to mention that you need to import 'globals.css' file to '_app.tsx' file . . . .
No need to, the globals.css file already exists in the fresh new Next.js project, and it's already imported. I just change the contents of this file at the 4:13 mark in this video 👍
Assalomu Aleykum thanks man )
It doesn't work, it just places a README document.
GREAT content bro, thanks man. BTW, I ain't even gay man, but damn, you're a handsome dude! Must be all that VIKING DNA over there in Northern Europe! Victory OR Valhalla! SKOL my NORDIC brothers, let's march and bring the BEARSERKERS, we are gonna party with the hot village chix! ahahaha