@astrojs/tailwind ignores Tailwind CSS v3.3 TypeScript config

[phenomen]

What version of astro are you using?

2.1.8

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

pnpm

Describe the Bug

When I use Tailwind CSS v3.3 TypeScript config file tailwind.config.ts, Astro ignores it and uses default config instead.

Reference: https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-typescript-support

I think you just need to bump Tailwind dependency to use updated resolveConfig.

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Thanks @phenomen, would accept a PR if you wanted to fix this.

[alf5]

it looks like tailwind 3.3 is already picked up by @astrojs/tailwind (either new project or pnpm upgrade)
but fails to load tailwind config file
Maybe this is as easy as getting @proload/core to use its typescript plugin - @proload/plugin-typescript ?

[Princesseuh]

I wonder if using proload is the best solution for loading the config. I'd expect Tailwind to provide something for that

[juliusmarminge]

I wonder if using proload is the best solution for loading the config. I'd expect Tailwind to provide something for that

They have. tailwindcss/loadConfig: https://github.com/tailwindlabs/tailwindcss/blob/master/src/lib/load-config.ts

We just shipped support for this in prettier-plugin-tailwindcss: tailwindlabs/prettier-plugin-tailwindcss#137

[FinnDore]

I wonder if using proload is the best solution for loading the config. I'd expect Tailwind to provide something for that

I think so https://github.com/tailwindlabs/tailwindcss/blob/master/src/lib/load-config.ts

can be imported like so:

import loadConfig from 'tailwindcss/loadConfig'

[FinnDore]

Gonna try make a pr now

[FinnDore]

So ive got it kind of working. Just struggling to get custom colors to load in the example for some reason

[FinnDore]

ah it was simply a questionable skill issue, for 34 minuites the idea that bg needs to be applied to t3-purple-100 for it to change the bg color had escaped my mind.... we have a working TS config!

just gonna clean up my code and then work out if this is still needed. If anyone has any ideas do tell me.

[juliusmarminge]

Tailwind does something similar so i think you need it https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/70ea7aa55d5ecc1b9202273b4c4deb84c4d8c979/src/index.js#L180

[FinnDore]

Currently its all working locally ( including the build ) but for some reason in ci the build is failing and i cant work out why. If anyone has any ideas lmk :)

[FinnDore]

So i got it all working however some of the not explicitly tailwind tests kept failing so ive given up for now. if some hero wants to take this on feel free to fork my repo or start from scratch. But i was 95% there i rekon.

Its worth noting you can remove this integration and simply create a postcss config inside you astro project to make use of tialwind 3.3.0 rn.

[TomPichaud]

@FinnDore Please try my fix, it should work nicely.
Also, you shouldn't bother with the tests failing if they are not related, they should still merge it.

[FinnDore]

Guess you have already tried the fix in #6724? oh and to be clear i did break the tests but im not sure how to get them working again.

[TomPichaud]

I've been using my fix and it does seem to work properly. I feel like this integration was doing too much redundant work.
Now it just setup postcss + base css import and it let tailwind handle the rest, as it should.

[azan-n]

Would love to have this fixed. This would give me ESM support in the tailwind config which would allow me to bring in design tokens from Style Dictionary.

[Princesseuh]

Bumping the priority on this as more and more people are using ESM / TS configs with Tailwind and we get many confused users both in other issues and in our Discord

[TomPichaud]

I’ll do it over the weekend.On 8 Jun 2023, at 08:36, Erika ***@***.***> wrote: Bumping the priority on this as more and more people are using ESM / TS configs with Tailwind —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>