Unable to configure tailwind css with next js about next.js HOT 6 CLOSED

@makepnic I have tagged repo url, fyi https://github.com/jeevandza/next-js-tailwind-config

from next.js.

I think you might be using the incorrect animate class. E.g. animation-shimmer must be animate-shimmer.
E.g. https://tailwindcss.com/docs/animation#customizing-your-theme if you define a spin-slow animation you must use it as animate-spin-slow. There seems to be an issue tho that you're trying to use the shimmer animation which doesn't seem to be defined anywhere.

If i change it to animate-shimmer the class css rules are properly set:

For the input part it seems like you want to bundle tailwind classes as a new classname? You can use plugins (i.e. addComponents) for that, see https://tailwindcss.com/docs/adding-custom-styles#writing-plugins . There's also the possibility of defining them in your css files and @apply some tailwind utilties. The extend property in the tailwind config might only extend existing tailwind classes/utilities

from next.js.

Ignore about the shimmer that was test code. So technically creating tailwind custom theme using tailwind classes in the config file is removed, we have to use plugin instead or have to define in css file then only it will work ?, but that would be tedious right ?. And also the added colours are not reflecting.

from next.js.

Ignore about the shimmer that was test code. So technically creating tailwind custom theme using tailwind classes in the config file is removed, we have to use plugin instead or have to define in css file then only it will work ?, but that would be tedious right ?.

Depends on what you feel is tedious. It's the idea of tailwind to not care about bundling various css rules under a class name. You can also create wrapping components or other solutions which were created to work with tailwind. This isn't a next topic tho.

And also the added colours are not reflecting.

I'm not sure if I follow you. It seems to work fine if i use e.g. bg-brown-500 to get #73523a which is coming from your tailwind config.

from next.js.

"bg-brown-500 to get #73523a" this did not work for me, its applying tailwind classes, anyway thanks for the assist. Im closing the ticket.

from next.js.

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

from next.js.