I have a problem with the rendering of my css. I seem to have a problem with the the responsive design only the default is visible. In the images below, the deployed version would not consider classNames using “sm:”
Here is the deployed vercel url:
I am using only react and i have used the tailwind cli
If anyone is able to help me it will be very appreciated
Hey @nhathivuong
this looks like that your tailwind setup probably isn’t creating the output you are looking for. I took at look at that URL and looked at the output.css and I see the text-4xl but I do not see some of the other expected outputs I would see from Tailwind.
can you tell me about your tailwind configuration and how this CSS was/is generated or maintained?
Hi Miguel, I am using the tailwind CLI v4.1 that uses this command:
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch to maintain the css
Have you tried building your project locally? like npm run build? Looking at your portfolio, my guess is it is using Create React App? I bet if you build the app and inspect the output on your computer, it will show the issue of the CSS.
My assumption is that it is actually an issue with the setup of tailwind with CRA and it’s build step than an issue with Vercel.
With that, Create React App is actually deprecated, and I would definitely recommend to move to something like Vite or Next.js.
Both of those frameworks have specific documentation on tailwind that work. In the end, Create React App will continue to give you more troubles as the libraries continue to evolve.
Let me know your findings though or if I am wrong on the CRA assumption!
