From 2e1bded735f3e2149c3ff95b1c131a147dda0f34 Mon Sep 17 00:00:00 2001 From: Drew Powers <1369770+drwpow@users.noreply.github.com> Date: Thu, 4 Nov 2021 14:01:28 -0600 Subject: [PATCH] Get Tailwind HMR working (first cut) (#1736) * Get Tailwind HMR working * PR feedback * perf: improve HMR `head` performance Co-authored-by: Nate Moore --- .changeset/shaggy-guests-type.md | 5 ++ docs/src/pages/guides/styling.md | 8 ++ examples/with-tailwindcss/package.json | 4 +- examples/with-tailwindcss/postcss.config.js | 6 +- .../src/components/Button.astro | 5 +- .../with-tailwindcss/src/pages/index.astro | 4 +- packages/astro/src/@types/astro-core.ts | 8 +- packages/astro/src/core/dev/index.ts | 65 +++++++++++++-- packages/astro/src/core/ssr/css.ts | 1 - packages/astro/src/core/ssr/html.ts | 83 +++++++++++-------- packages/astro/src/core/ssr/index.ts | 3 +- packages/astro/src/runtime/client/hmr.ts | 7 ++ yarn.lock | 60 +++++++------- 13 files changed, 175 insertions(+), 84 deletions(-) create mode 100644 .changeset/shaggy-guests-type.md diff --git a/.changeset/shaggy-guests-type.md b/.changeset/shaggy-guests-type.md new file mode 100644 index 000000000..062ba96be --- /dev/null +++ b/.changeset/shaggy-guests-type.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +fix: Improve Tailwind HMR diff --git a/docs/src/pages/guides/styling.md b/docs/src/pages/guides/styling.md index 98df62b8a..a42d759df 100644 --- a/docs/src/pages/guides/styling.md +++ b/docs/src/pages/guides/styling.md @@ -235,6 +235,14 @@ Now you're ready to write Tailwind! Our recommended approach is to create a `src @tailwind utilities; ``` +Lastly, add it to your Astro page (or layout template): + +```astro + + + +``` + As an alternative to `src/styles/global.css`, You may also add Tailwind utilities to individual `pages/*.astro` components in `