Next.js Discord

Discord Forum

Tailwind not working in custom components

Answered
Philippine Crocodile posted this in #help-forum
Open in Discord
Philippine CrocodileOP
Im making a custom component for creating buttons but when i try adding tailwind classes to it, they doesn't work
Answered by Philippine Crocodile
i forgot to add the path to the tailwind.config.js
View full answer

16 Replies

Philippine CrocodileOP
btw, button.tsx is located in /components/button.js and page.tsx is located in /src/page.tsx
Luke Skywalker
did you make sure to import globals.css into your layout?
Generally id suggest to use npx create-next-app with tailwind option or using one of the boilerplate with tailwind setup already 😉
i've tried moving button.tsx to /src/app and it works
but if i move it to another folder it just doesn't
Philippine CrocodileOP
well, i will import globals.css in every custom component lmao
@Philippine Crocodile well, i will import globals.css in every custom component lmao
Luke Skywalker
well that def. is not expected behaviour 😅
Philippine CrocodileOP
i will try restarting the dev server
it now works 50/50%
the text-center class is working
but the text-red-600 class isn't
nah it doesn't work 😭
I FOUND THE PROBLEM LMAO
Philippine CrocodileOP
i forgot to add the path to the tailwind.config.js
Answer