Refactor tailwind integration setup #5717

bluwy · 2023-01-02T12:20:22Z

Changes

As discussed in the maintainers chat, the style.postcss Astro config can be removed in favour of vite.css.postcss. They do the same thing internally, and is only a property used by the tailwind integration.

I also disabled autoprefixer in dev. I'm not sure if this was intentional, but enabling it slows down dev a lot so I changed that in the PR too.

Testing

It doesn't seem like there's existing tests for tailwind, but I've tested manually with the with-tailwindcss example and it works.

Docs

n/a. internal refactor.

changeset-bot · 2023-01-02T12:20:27Z

🦋 Changeset detected

Latest commit: 13387d4

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

packages/integrations/svelte/src/index.ts

bluwy · 2023-01-03T14:00:48Z

Marking as draft. This depends on #5685

Princesseuh

Looks good to me! I fear a little bit that some users will get confused by autoprefixer not being on in dev, but if we communicate it enough it'll be fine, I think

bluwy · 2023-01-04T15:36:15Z

Good point. I've updated the tailwind readme to reflect that. It also doesn't look like we mention autoprefixer anywhere before, so this seems like a good time to bring up. cc @withastro/maintainers-docs for review!

packages/integrations/tailwind/README.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

artstorm · 2023-01-19T03:18:06Z

packages/integrations/tailwind/src/index.ts

+	return {
+		css: {
+			postcss: {
+				plugins: postcssPlugins,


@bluwy Setting an inline PostCSS config in Vite, has the effect that Vite no longer looks for postcss.config.cjs.

See:

Note if an inline config is provided, Vite will not search for other PostCSS config sources.
https://vitejs.dev/config/shared-options.html#css-postcss

That results in by adding the Tailwind Integration 3.0.0-beta.x, postcss.config.cjs no longer work as described in the Astro Docs.
https://docs.astro.build/en/guides/styling/#postcss

Hmm that's true, but I think that happens before this PR too as Astro was assigning to the property internally:

https://github.com/withastro/astro/pull/5717/files#diff-025f8338e5be413b0f65c74bc50d6484c6bc9bb4f78847da0ba896b8e9569390L153-L155

I guess for the tailwind integration we need to read postcss.config.js too to resolve this.

Confirming, trying latest @beta packages makes Tailwind to ignore postcss.config.js (f.e. to enable nesting)

Seem to be addressed in: #5908

Seem to be addressed in: #5908

Came up with a possible fix for the issue, but I'm hitting another issue. Applying changes to the postcss.config.js file only has effect after restarting the dev server.

I just wanted to know if it was an issue before, so that it will get addressed in another PR and doesn't block the current one.

Any ideas?

I think it was looking at the old code. I'd be fine merging it first, then handle the restart later.

I think it was looking at the old code. I'd be fine merging it first, then handle the restart later.

Sounds good, thanks!

artstorm · 2023-01-24T11:35:34Z

@bluwy

I also disabled autoprefixer in dev. I'm not sure if this was intentional, but enabling it slows down dev a lot so I changed that in the PR too.

I found another side effect from this PR. There are classes in Tailwind that relies on Autoprefixer to work in all current browsers. One being Background Clip. background-clip only works in Chrome with -webkit- prefix. See CanIUse.

Tailwind styling that works perfectly fine in Astro 1.9 in dev, doesn't work in the current beta if using the lastest Chrome.

Example:

It would probably be a good idea to keep autoprefixer enabled in dev, as some Tailwind classes rely on it to work across all browsers. Otherwise it will probably be quite confusing when working in dev if certain parts of Tailwind does not work in popular browsers, like Chrome.

bluwy · 2023-01-24T14:16:06Z

I think I saw this issue in Discord too. We can definitely add an option to turn on autoprefixer in dev, but I still think it's good to turn it off by default to have good performance. Usually it's expected that developers work in evergreen browsers, but background-clip seems to be a special case that's not supported by most evergreen browsers.

Another option is to turn on background-clip processing only in dev. Could you help create an issue so we can track this? 🙏

…tup) that removed autoprefixer in non build modes

chenxsan · 2023-01-27T07:43:29Z

Usually it's expected that developers work in evergreen browsers

That's not true if your project targets any old browsers, you would need to test them when developing, not after building.

I think Astro can provide an option for users who want to disable autoprefixer in dev env, but please don't turn that option on by default as it could break things like the issue #5989

williameckert1 · 2023-01-28T19:01:56Z

We can definitely add an option to turn on autoprefixer in dev, but I still think it's good to turn it off by default to have good performance.

Please do, but ideally with Autoprefixer on by default.
The issue with background-clip was confusing me a lot today (my fault for not reading the changelog in detail). But this new default makes it impossible to preview the UI correctly across browsers.

badalsaibo · 2023-07-12T06:28:38Z

Hey, I upgraded from v1.0.0 to v2.6.0 and there was an error regarding this config.style.postcss not found? Any work arounds for that? Thanks

bluwy · 2023-07-12T07:10:37Z

Make sure to upgrade all the astro-related dependencies together.

badalsaibo · 2023-07-12T08:18:21Z

So the astro update itself happens when adding the official netflify adapter. Is there any command to upgrade all astro required dependencies?

bluwy · 2023-07-12T08:53:11Z

npm update @astrojs/tailwind @astrojs/other-stuff. Please open a support thread in Discord for further support 😬

Refactor tailwind integration setup

6949220

github-actions bot added pkg: astro Related to the core `astro` package (scope) pkg: svelte Related to Svelte (scope) pkg: integration Related to any renderer integration (scope) labels Jan 2, 2023

bluwy commented Jan 2, 2023

View reviewed changes

packages/integrations/svelte/src/index.ts Outdated Show resolved Hide resolved

bluwy marked this pull request as draft January 3, 2023 14:00

Merge branch 'main' into tailwind-refactor

d3af05a

github-actions bot removed the pkg: svelte Related to Svelte (scope) label Jan 4, 2023

bluwy marked this pull request as ready for review January 4, 2023 09:38

Princesseuh approved these changes Jan 4, 2023

View reviewed changes

Add note about autoprefixer

8d604da

bluwy requested a review from a team as a code owner January 4, 2023 15:35

sarah11918 approved these changes Jan 4, 2023

View reviewed changes

packages/integrations/tailwind/README.md Outdated Show resolved Hide resolved

Update packages/integrations/tailwind/README.md

13387d4

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

natemoo-re approved these changes Jan 4, 2023

View reviewed changes

bluwy added the semver: major Change triggers a `major` release label Jan 5, 2023

bluwy merged commit a3a7fc9 into main Jan 5, 2023

bluwy deleted the tailwind-refactor branch January 5, 2023 08:02

astrobot-houston mentioned this pull request Jan 5, 2023

[ci] release (beta) #5742

Merged

artstorm reviewed Jan 19, 2023

View reviewed changes

hendriknielaender mentioned this pull request Jan 25, 2023

feat: upgrade to astro2.0 hendriknielaender/double-trouble#39

Merged

royeden added a commit to royeden/astro that referenced this pull request Jan 27, 2023

Reverted a change in withastro#5717 (Refactor tailwind integration se…

28d2303

…tup) that removed autoprefixer in non build modes

royeden mentioned this pull request Jan 27, 2023

fix: autoprefixer on dev mode for tailwind plugin #6002

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactor tailwind integration setup #5717

Refactor tailwind integration setup #5717

bluwy commented Jan 2, 2023

changeset-bot bot commented Jan 2, 2023 •

edited

bluwy commented Jan 3, 2023

Princesseuh left a comment

bluwy commented Jan 4, 2023

artstorm Jan 19, 2023

bluwy Jan 19, 2023

LexSwed Jan 22, 2023 •

edited

MoustaphaDev Jan 22, 2023 •

edited

bluwy Jan 22, 2023

MoustaphaDev Jan 23, 2023

artstorm commented Jan 24, 2023 •

edited

bluwy commented Jan 24, 2023

chenxsan commented Jan 27, 2023 •

edited

williameckert1 commented Jan 28, 2023 •

edited

badalsaibo commented Jul 12, 2023

bluwy commented Jul 12, 2023

badalsaibo commented Jul 12, 2023

bluwy commented Jul 12, 2023

Refactor tailwind integration setup #5717

Refactor tailwind integration setup #5717

Conversation

bluwy commented Jan 2, 2023

Changes

Testing

Docs

changeset-bot bot commented Jan 2, 2023 • edited

🦋 Changeset detected

bluwy commented Jan 3, 2023

Princesseuh left a comment

Choose a reason for hiding this comment

bluwy commented Jan 4, 2023

artstorm Jan 19, 2023

Choose a reason for hiding this comment

bluwy Jan 19, 2023

Choose a reason for hiding this comment

LexSwed Jan 22, 2023 • edited

Choose a reason for hiding this comment

MoustaphaDev Jan 22, 2023 • edited

Choose a reason for hiding this comment

bluwy Jan 22, 2023

Choose a reason for hiding this comment

MoustaphaDev Jan 23, 2023

Choose a reason for hiding this comment

artstorm commented Jan 24, 2023 • edited

bluwy commented Jan 24, 2023

chenxsan commented Jan 27, 2023 • edited

williameckert1 commented Jan 28, 2023 • edited

badalsaibo commented Jul 12, 2023

bluwy commented Jul 12, 2023

badalsaibo commented Jul 12, 2023

bluwy commented Jul 12, 2023

changeset-bot bot commented Jan 2, 2023 •

edited

LexSwed Jan 22, 2023 •

edited

MoustaphaDev Jan 22, 2023 •

edited

artstorm commented Jan 24, 2023 •

edited

chenxsan commented Jan 27, 2023 •

edited

williameckert1 commented Jan 28, 2023 •

edited