@astrojs/tailwind: simplify, upgrade & fix support for ts config file

[TomPichaud]

First participation to Astro! Love your project and looking forward to its evolution!

Fix: #6695

Changes

Commit 8a8be42 : add support for ESM/TS config files while maintaining current behaviour: providing a default tailwind config for astro if none is present.

Knowing that Astro can already suggest and generate a default tailwind config trough the command astro add tailwind, I think we can simplify this integration further, reducing its dependencies and making it more robust.

In light of the above, I've made the following commit 4a515e3 : only setup postcss, supporting custom config file path and the base css import

Also, I feel like any integration setup should be inside the integration package and not hard coded into astro to be able to use astro add ....

Testing

Tested locally with a tailwind.config.ts and custom custom-tailwind.config.ts

Docs

No further documentation is needed, but we could add ESM/TS support

[changeset-bot]

🦋 Changeset detected

Latest commit: 7540609

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[matthewp]

Mistake?

[ematipico]

I can't see the history of the file. @TomPichaud is this change intentional? Shouldn't this be a patch change, considering the PR says "fix"?

If this is a major, and breaks existing APIs, the changeset should mention a migration path for what's changed.

[bluwy]

I've updated this part with what changed and the migration path.

[matthewp]

Hey @TomPichaud are you still working on this change? Thanks!

[TomPichaud]

I think I'm done. Did you read all of my commit ? I was hoping for some review or discussion around this but I'm happy with my work. Maybe someone can review and approve ?

I'm not sure about the version as I've made some changes that affect users with no tailwind config, if any ¿? But like I said, Astro is already pushing the user to have a tailwind config file and can do it through the CLI. I'll let you decide.

[chav-aniket]

+1 for getting this reviewed asap, thanks for the work Tom 🙇🏽

[TomPichaud]

@matthewp Any review would be welcome please ? It's working perfectly on all my projects and I really don't mind if you want to change the version's type.

[helbing]

@TomPichaud Hi guy, are you still dealing with this PR?

[TomPichaud]

Just waiting for someone to review and approve...

[matthewp]

We usually don't review the code until the PR is ready; meaning merge conflicts are resolved and tests are passing.

As for the overall theme of the PR, definitely in favor of simplifying! One thing that's important is HMR. Have you verified that this change still allows Tailwind changes to HMR in the client? Have you verified that changing the config triggers HMR as well (the addWatchFile removal might have hurt that).

And just to clarify, the main new feature / bug fix of this PR is that TypeScript and ESM configs are now supported, is that correct?

[helbing]

I think we should separate the fix thing and refactor thing. To support TypeScript config is high priority, we should deal with it first. And then later we can refactor the tailwind integration at other PR. How do you think? @TomPichaud @matthewp

[TomPichaud]

Like I said, there's little point doing redundant work. To my opinion it's best to let tailwind load the config and not do it ourself, adding more dependencies, bug possibilities and the necessity to update it when tailwind add a feature. Simple|Less is better, and if we follow tailwind's recommendations we just need to configure postcss + vite, like I'm suggesting we do.

Also they are working on automatic 'content' detection so it will already be ready for that.

So I disagree on the fix first and then refactor because the fix is adding dependencies as the refactoring is removing some dependencies to get the same result.
Also Astro'doc already recommend and explain how to create a tailwind config file that support astro, and it even do it for you through the command line using tailwind init feature. So we should not overthink it and load a custom config that we edit just for the content section to support astro.

I suggest you test this pr thoroughly and merge it. I've got no issues locally.

[helbing]

Like I said, there's little point doing redundant work. To my opinion it's best to let tailwind load the config and not do it ourself, adding more dependencies, bug possibilities and the necessity to update it when tailwind add a feature. Simple|Less is better, and if we follow tailwind's recommendations we just need to configure postcss + vite, like I'm suggesting we do.

Also they are working on automatic 'content' detection so it will already be ready for that.

So I disagree on the fix first and then refactor because the fix is adding dependencies as the refactoring is removing some dependencies to get the same result. Also Astro'doc already recommend and explain how to create a tailwind config file that support astro, and it even do it for you through the command line using tailwind init feature. So we should not overthink it and load a custom config that we edit just for the content section to support astro.

I suggest you test this pr thoroughly and merge it. I've got no issues locally.

Yes, I test it locally, it can works. I see the branch has conflicts need be resolved, can you deal with it?

[bluwy]

I've rebased the PR and it should be good to go now. I also think it's nice to clean up the config by moving config.path and config.applyBaseStyles to the root, which that could be made after this is merged.

[TomPichaud]

Thanks for your help!

[matthewp]

Let's do a preview release and test it out. In particular we need to verify there are no regressions in terms of HMR, which is something we fixed in the previous implementation.

[matthewp]

!preview tailwind-config

[github-actions]

 > [email protected] release /home/runner/work/astro/astro > pnpm run build && changeset publish "--tag" "next--tailwind-config" > [email protected] build /home/runner/work/astro/astro > turbo run build --filter=astro --filter=create-astro --filter="@astrojs/*" --filter="@benchmark/*" �[2m• Packages in scope: @astrojs/alpinejs, @astrojs/cloudflare, @astrojs/deno, @astrojs/image, @astrojs/internal-helpers, @astrojs/lit, @astrojs/markdoc, @astrojs/markdown-component, @astrojs/markdown-remark, @astrojs/mdx, @astrojs/netlify, @astrojs/node, @astrojs/partytown, @astrojs/preact, @astrojs/prefetch, @astrojs/prism, @astrojs/react, @astrojs/rss, @astrojs/sitemap, @astrojs/solid-js, @astrojs/svelte, @astrojs/tailwind, @astrojs/telemetry, @astrojs/turbolinks, @astrojs/underscore-redirects, @astrojs/vercel, @astrojs/vue, @astrojs/webapi, @benchmark/timer, astro, create-astro�[0m �[2m• Running�[0m �[2m�[1mbuild�[0m�[0m �[2min 31 packages�[0m �[2m• Remote caching enabled�[0m �[35m@astrojs/webapi:build: �[0mcache hit, suppressing output �[2m148d7b975b98543a�[0m �[32m@astrojs/internal-helpers:build: �[0mcache hit, suppressing output �[2mf3566c825673df15�[0m �[36mcreate-astro:build: �[0mcache hit, suppressing output �[2mc0189683f0b99d20�[0m �[33m@astrojs/prism:build: �[0mcache hit, suppressing output �[2mff661f7ff42cec53�[0m �[34m@astrojs/telemetry:build: �[0mcache hit, suppressing output �[2md69e33e51c9c3b58�[0m �[35m@astrojs/markdown-remark:build: �[0mcache hit, suppressing output �[2m7b4fcfadb8d6cc95�[0m �[32mastro:build: �[0mcache miss, executing �[2m45d209aba3b7b402�[0m �[32mastro:build: �[0m �[32mastro:build: �[0m> [email protected] build /home/runner/work/astro/astro/packages/astro �[32mastro:build: �[0m> pnpm run prebuild && astro-scripts build "src/**/*.{ts,js}" && tsc && pnpm run postbuild �[32mastro:build: �[0m �[32mastro:build: �[0m �[32mastro:build: �[0m> [email protected] prebuild /home/runner/work/astro/astro/packages/astro �[32mastro:build: �[0m> astro-scripts prebuild --to-string "src/runtime/server/astro-island.ts" "src/runtime/client/{idle,load,media,only,visible}.ts" �[32mastro:build: �[0m �[32mastro:build: �[0m �[32mastro:build: �[0m> [email protected] postbuild /home/runner/work/astro/astro/packages/astro �[32mastro:build: �[0m> astro-scripts copy "src/**/*.astro" && astro-scripts copy "src/**/*.wasm" �[32mastro:build: �[0m �[34m@benchmark/timer:build: �[0mcache miss, executing �[2m07aa803b0a316ae3�[0m �[35m@astrojs/markdoc:build: �[0mcache miss, executing �[2m9661f7bb1af69679�[0m �[32m@astrojs/preact:build: �[0mcache miss, executing �[2mebb846c55de52e48�[0m �[33m@astrojs/node:build: �[0mcache miss, executing �[2mfc3de28aa113d266�[0m �[36m@astrojs/svelte:build: �[0mcache miss, executing �[2m411cbcd3217d91bd�[0m �[35m@astrojs/tailwind:build: �[0mcache miss, executing �[2m3fe1471f4f29d2e3�[0m �[33m@astrojs/partytown:build: �[0mcache miss, executing �[2mff955b221d957323�[0m �[36m@astrojs/underscore-redirects:build: �[0mcache miss, executing �[2m8e1a36acdc55be87�[0m �[34m@astrojs/image:build: �[0mcache miss, executing �[2m5bab5796f177d0fc�[0m �[32m@astrojs/react:build: �[0mcache miss, executing �[2m138017e94f89264f�[0m �[33m@astrojs/partytown:build: �[0m �[33m@astrojs/partytown:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/partytown �[33m@astrojs/partytown:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/partytown:build: �[0m �[35m@astrojs/markdoc:build: �[0m �[35m@astrojs/markdoc:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/markdoc �[35m@astrojs/markdoc:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[35m@astrojs/markdoc:build: �[0m �[36m@astrojs/svelte:build: �[0m �[36m@astrojs/svelte:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/svelte �[36m@astrojs/svelte:build: �[0m> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc �[36m@astrojs/svelte:build: �[0m �[32m@astrojs/react:build: �[0m �[32m@astrojs/react:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/react �[32m@astrojs/react:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/react:build: �[0m �[34m@benchmark/timer:build: �[0m �[34m@benchmark/timer:build: �[0m> @benchmark/[email protected] build /home/runner/work/astro/astro/benchmark/packages/timer �[34m@benchmark/timer:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[34m@benchmark/timer:build: �[0m �[36m@astrojs/underscore-redirects:build: �[0m �[36m@astrojs/underscore-redirects:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/underscore-redirects �[36m@astrojs/underscore-redirects:build: �[0m> astro-scripts build "src/**/*.ts" && tsc -p tsconfig.json �[36m@astrojs/underscore-redirects:build: �[0m �[35m@astrojs/tailwind:build: �[0m �[35m@astrojs/tailwind:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/tailwind �[35m@astrojs/tailwind:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[35m@astrojs/tailwind:build: �[0m �[32m@astrojs/preact:build: �[0m �[32m@astrojs/preact:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/preact �[32m@astrojs/preact:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/preact:build: �[0m �[33m@astrojs/node:build: �[0m �[33m@astrojs/node:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/node �[33m@astrojs/node:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/node:build: �[0m �[34m@astrojs/image:build: �[0m �[34m@astrojs/image:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/image �[34m@astrojs/image:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[34m@astrojs/image:build: �[0m �[33m@astrojs/deno:build: �[0mcache miss, executing �[2m51cfd26f1be071fd�[0m �[34m@astrojs/vue:build: �[0mcache miss, executing �[2mba7ca5b19e40d281�[0m �[36m@astrojs/solid-js:build: �[0mcache miss, executing �[2mc2868bffee5912ab�[0m �[35m@astrojs/mdx:build: �[0mcache miss, executing �[2m375bdc4c4a32c9de�[0m �[32m@astrojs/rss:build: �[0mcache miss, executing �[2m05311f0873bd0e71�[0m �[33m@astrojs/vercel:build: �[0mcache miss, executing �[2mfe73c9b2d73586bc�[0m �[34m@astrojs/prefetch:build: �[0mcache miss, executing �[2m0d9f6b02d3dfb08d�[0m �[36m@astrojs/alpinejs:build: �[0mcache miss, executing �[2m4e6f3d70b813d468�[0m �[35m@astrojs/lit:build: �[0mcache miss, executing �[2m7e15263a4f0501e7�[0m �[33m@astrojs/deno:build: �[0m �[33m@astrojs/deno:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/deno �[33m@astrojs/deno:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/deno:build: �[0m �[34m@astrojs/vue:build: �[0m �[34m@astrojs/vue:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/vue �[34m@astrojs/vue:build: �[0m> astro-scripts build "src/index.ts" && astro-scripts build "src/editor.cts" --force-cjs --no-clean-dist && tsc �[34m@astrojs/vue:build: �[0m �[35m@astrojs/mdx:build: �[0m �[35m@astrojs/mdx:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/mdx �[35m@astrojs/mdx:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[35m@astrojs/mdx:build: �[0m �[36m@astrojs/solid-js:build: �[0m �[36m@astrojs/solid-js:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/solid �[36m@astrojs/solid-js:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[36m@astrojs/solid-js:build: �[0m �[32m@astrojs/rss:build: �[0m �[32m@astrojs/rss:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/astro-rss �[32m@astrojs/rss:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/rss:build: �[0m �[33m@astrojs/vercel:build: �[0m �[33m@astrojs/vercel:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/vercel �[33m@astrojs/vercel:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/vercel:build: �[0m �[36m@astrojs/alpinejs:build: �[0m �[36m@astrojs/alpinejs:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/alpinejs �[36m@astrojs/alpinejs:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[36m@astrojs/alpinejs:build: �[0m �[34m@astrojs/prefetch:build: �[0m �[34m@astrojs/prefetch:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/prefetch �[34m@astrojs/prefetch:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[34m@astrojs/prefetch:build: �[0m �[35m@astrojs/lit:build: �[0m �[35m@astrojs/lit:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/lit �[35m@astrojs/lit:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[35m@astrojs/lit:build: �[0m �[32m@astrojs/turbolinks:build: �[0mcache miss, executing �[2m65aae32861259df0�[0m �[33m@astrojs/netlify:build: �[0mcache miss, executing �[2md1475f7182f01e9b�[0m �[32m@astrojs/turbolinks:build: �[0m �[32m@astrojs/turbolinks:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/turbolinks �[32m@astrojs/turbolinks:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[32m@astrojs/turbolinks:build: �[0m �[34m@astrojs/cloudflare:build: �[0mcache miss, executing �[2m56dffeaea04d97fe�[0m �[36m@astrojs/sitemap:build: �[0mcache miss, executing �[2m4d9a14d9bc9b9cb6�[0m �[33m@astrojs/netlify:build: �[0m �[33m@astrojs/netlify:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/netlify �[33m@astrojs/netlify:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[33m@astrojs/netlify:build: �[0m �[36m@astrojs/sitemap:build: �[0m �[36m@astrojs/sitemap:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/sitemap �[36m@astrojs/sitemap:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[36m@astrojs/sitemap:build: �[0m �[34m@astrojs/cloudflare:build: �[0m �[34m@astrojs/cloudflare:build: �[0m> @astrojs/[email protected] build /home/runner/work/astro/astro/packages/integrations/cloudflare �[34m@astrojs/cloudflare:build: �[0m> astro-scripts build "src/**/*.ts" && tsc �[34m@astrojs/cloudflare:build: �[0m Tasks: 30 successful, 30 total Cached: 6 cached, 30 total Time: 1m28.338s 🦋 �[33mwarn�[39m �[31m===============================IMPORTANT!===============================�[39m 🦋 �[33mwarn�[39m Packages will be released under the next--tailwind-config tag 🦋 �[33mwarn�[39m �[31m----------------------------------------------------------------------�[39m 🦋 �[36minfo�[39m npm info astro 🦋 �[36minfo�[39m npm info @astrojs/prism 🦋 �[36minfo�[39m npm info @astrojs/rss 🦋 �[36minfo�[39m npm info create-astro 🦋 �[36minfo�[39m npm info @astrojs/alpinejs 🦋 �[36minfo�[39m npm info @astrojs/cloudflare 🦋 �[36minfo�[39m npm info @astrojs/deno 🦋 �[36minfo�[39m npm info @astrojs/image 🦋 �[36minfo�[39m npm info @astrojs/lit 🦋 �[36minfo�[39m npm info @astrojs/markdoc 🦋 �[36minfo�[39m npm info @astrojs/mdx 🦋 �[36minfo�[39m npm info @astrojs/netlify 🦋 �[36minfo�[39m npm info @astrojs/node 🦋 �[36minfo�[39m npm info @astrojs/partytown 🦋 �[36minfo�[39m npm info @astrojs/preact 🦋 �[36minfo�[39m npm info @astrojs/prefetch 🦋 �[36minfo�[39m npm info @astrojs/react 🦋 �[36minfo�[39m npm info @astrojs/sitemap 🦋 �[36minfo�[39m npm info @astrojs/solid-js 🦋 �[36minfo�[39m npm info @astrojs/svelte 🦋 �[36minfo�[39m npm info @astrojs/tailwind 🦋 �[36minfo�[39m npm info @astrojs/turbolinks 🦋 �[36minfo�[39m npm info @astrojs/vercel 🦋 �[36minfo�[39m npm info @astrojs/vue 🦋 �[36minfo�[39m npm info @astrojs/internal-helpers 🦋 �[36minfo�[39m npm info @astrojs/markdown-component 🦋 �[36minfo�[39m npm info @astrojs/markdown-remark 🦋 �[36minfo�[39m npm info @astrojs/telemetry 🦋 �[36minfo�[39m npm info @astrojs/underscore-redirects 🦋 �[36minfo�[39m npm info @astrojs/webapi 🦋 �[36minfo�[39m astro is being published because our local version (0.0.0-tailwind-config-20230612122302) has not been published on npm 🦋 �[33mwarn�[39m @astrojs/prism is not being published because version 2.1.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/rss is not being published because version 2.4.3 is already published on npm 🦋 �[33mwarn�[39m create-astro is not being published because version 3.1.7 is already published on npm 🦋 �[33mwarn�[39m @astrojs/alpinejs is not being published because version 0.2.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/cloudflare is not being published because version 6.4.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/deno is not being published because version 4.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/image is not being published because version 0.17.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/lit is not being published because version 2.0.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdoc is not being published because version 0.3.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/mdx is not being published because version 0.19.7 is already published on npm 🦋 �[33mwarn�[39m @astrojs/netlify is not being published because version 2.3.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/node is not being published because version 5.2.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/partytown is not being published because version 1.2.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/preact is not being published because version 2.2.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/prefetch is not being published because version 0.2.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/react is not being published because version 2.2.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/sitemap is not being published because version 1.3.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/solid-js is not being published because version 2.2.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/svelte is not being published because version 3.0.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/tailwind is not being published because version 3.1.3 is already published on npm 🦋 �[33mwarn�[39m @astrojs/turbolinks is not being published because version 0.2.2 is already published on npm 🦋 �[33mwarn�[39m @astrojs/vercel is not being published because version 3.5.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/vue is not being published because version 2.2.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/internal-helpers is not being published because version 0.1.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdown-component is not being published because version 1.0.5 is already published on npm 🦋 �[33mwarn�[39m @astrojs/markdown-remark is not being published because version 2.2.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/telemetry is not being published because version 2.1.1 is already published on npm 🦋 �[33mwarn�[39m @astrojs/underscore-redirects is not being published because version 0.1.0 is already published on npm 🦋 �[33mwarn�[39m @astrojs/webapi is not being published because version 2.2.0 is already published on npm 🦋 �[36minfo�[39m Publishing �[36m"astro"�[39m at �[32m"0.0.0-tailwind-config-20230612122302"�[39m 🦋 �[32msuccess�[39m packages published successfully: 🦋 [email protected] 🦋 Creating git tag... 🦋 New tag: [email protected]

[matthewp]

For some reason the preview release didn't work. So I manually did a beta release which you can test with:

npm install @astrojs/tailwind@beta

[matthewp]

HMR looks good here.

[ematipico]

Let's 🚢 it!