Add Tailwind support to Astro Dev Server #222
Conversation
🦋 Changeset detectedLatest commit: 3fb7324 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
| @@ -28,6 +28,8 @@ export default { | |||
| devOptions: { | |||
| /** The port to run the dev server on. */ | |||
| port: 3000, | |||
| /** Path to tailwind.config.js if used, e.g. './tailwind.config.js' */ | |||
| tailwindConfig: undefined, | |||
There was a problem hiding this comment.
This adds a devOptions.tailwindConfig key to Astro, too (copying from Snowpack).
While adding Tailwind-specific config isn‘t great, I think it’s far preferable than writing a bunch of code for Tailwind to try and be “smart” about Tailwind detection.
| @@ -31,11 +30,7 @@ | |||
| "luxon": "^1.25.0", | |||
| "markdown-it": "^12.0.2", | |||
| "markdown-it-anchor": "^6.0.0", | |||
| "nodemon": "^2.0.7", | |||
| "stylelint": "^13.8.0", | |||
There was a problem hiding this comment.
Very weird thing: stylelint was throwing off our monorepo deps 🤪. It was downgrading PostCSS to 7 which was breaking Tailwind support. Removed, so that Astro ships with PostCSS 8.
| for (const loc of tailwindNames) { | ||
| const tailwindLoc = path.join(fileURLToPath(compileOptions.astroConfig.projectRoot), loc); | ||
| if (fs.existsSync(tailwindLoc)) { | ||
| miniCache.tailwindEnabled = true; // Success! We have a Tailwind config file. |
There was a problem hiding this comment.
As part of devOptions.tailwindConfig, we got to remove a lot of Tailwind-specific code in Astro (almost all of it)!
| ]; | ||
|
|
||
| // note: styles only need processing once | ||
| if (target === 'frontend') { |
There was a problem hiding this comment.
This is a bit of a microoptimization, but it was a bit annoying debugging stylesheet generation, and having everything run twice. I extracted the style gen to only run once in Snowpack. I don’t think this is a huge boost or anything, but it at least makes it simpler to reason/debug.
|
|
||
| // Tailwind: IDK what this does but it makes JIT work 🤷♂️ | ||
| if (astroConfig.devOptions.tailwindConfig) { | ||
| (process.env as any).TAILWIND_DISABLE_TOUCH = true; |
There was a problem hiding this comment.
lol this took me hours to find and is basically the whole PR
There was a problem hiding this comment.
This may break in an upcoming version of JIT; that’s fine. Finding this at least got me digging into Tailwind’s JIT code a little to understand it better. So if this breaks, we can probably find another fix (and who knows; maybe this was even a bug in JIT that will be fixed before release).
* Improve PostCSS and Tailwind support * Update styling docs * Changelog * Fix test hanging
Changes
2021-05-21.11-09-25.2021-05-21.11_10_51.mp4
Tailwind is now usable in Astro Dev server! 🎉 This follows up on Tailwind JIT support in Snowpack dev and adds it to Astro. However, it does need one update from
@snowpack/plugin-postcss:Testing
This is mostly a dev-server concern; build is unaffected. This is really hard to write a test for (I’d rather not introduce that right now, as this would really slow down our test suite)
Docs
The Tailwind guide in Astro updated