Tailwind config when selecting TailWind as styling library during setup

[jeffspurlock]

Hello,

Upon setting up my storefront, i selected TailWind for the styling library. Tailwind is working; i can use all of my basic utility classes just fine, but i'm used to there being a tailwind.config.js in the root where i can extend tailwind to include custom colors. I figured i just needed to run npx tailwindcss init but that failed; so i tried running npm install -D tailwindcss and then init again, but it still failed... so i instead tried definining tailwind config in vite, using defineConfig({... css: postcss: plugins: tailwindcss({ theme: extendL: ....} but this doesn't like to accept an argument for plugins: tailwindcss(), it also doesn't like the theme extend config being passed in at the top under plugins: tailwindcss() either.

It seems like if you do the automated tailwind set up, you end up with a non-traditional install of tailwing that hinders the abiilty to extend it? I feel like i have to be missing something. I'd hate to start over so i could seletct no styling library during scaffolding and add it in myself after, but i feel like thats the next step here; unless im just missing something altogether.

[frandiox]

Hi 👋 -- The automated Tailwind setup is v4 (alpha), as stated in the init process dialogs. The v4 has a different way to configure things. If you open your app/styles/tailwind.css file, you'll see a link to the official docs for this version.

You can always downgrade to v3 if you prefer the traditional way.

[jeffspurlock]

Oh man... what a bonehead move. can't believe I didn't see that link in the comments. Also, this method with v4 is honestly way better than the old js config file. this is great. Thanks!

[SeedyROM]

I know this was answered but you need to make sure you import the tailwind.css file as well. I missed this!

import tailwindStyles from '~/styles/tailwind.css?url';

And then add it to the links method in root.tsx:

export function links() {
  return [
    // ...
    {rel: 'stylesheet', href: tailwindStyles},
    // ...
  ];
}