From 4c4c797020ffb79cfa00e2dfa801fba06a1b83e6 Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@matthewphillips.info>
Date: Fri, 27 Aug 2021 06:40:40 -0700
Subject: [PATCH] Update Tailwind docs for path to css (#1240)

* Update Tailwind docs for path to css

* Remove other references to public in the styling guide

* Remove unnecessary (pages)
---
 docs/src/pages/guides/styling.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/src/pages/guides/styling.md b/docs/src/pages/guides/styling.md
index bdeb3a22f..26892a646 100644
--- a/docs/src/pages/guides/styling.md
+++ b/docs/src/pages/guides/styling.md
@@ -114,10 +114,12 @@ Astro also supports [Sass][sass] out-of-the-box. To enable for each framework:
 
 💁‍ Sass is great! If you haven't used Sass in a while, please give it another try. The new and improved [Sass Modules][sass-use] are a great fit with modern web development, and it's blazing-fast since being rewritten in Dart. And the best part? **You know it already!** Use `.scss` to write familiar CSS syntax you're used to, and only sprinkle in Sass features if/when you need them.'
 
-**Note**: If you use .scss files rather than .css files, your stylesheet links should still point to .css files because of Astro’s auto-compilation process. When Astro “needs” the styling files, it’ll be “looking for” the final .css file(s) that it compiles from the .scss file(s). For example, if you have a .scss file at `./public/style/global.scss`, use this link: `<link rel="stylesheet" href="/style/global.css">` — **not** `<link rel="stylesheet" href="/style/global.scss">`.
+**Note**: If you use .scss files rather than .css files, your stylesheet links should still point to .css files because of Astro’s auto-compilation process. When Astro “needs” the styling files, it’ll be “looking for” the final .css file(s) that it compiles from the .scss file(s). For example, if you have a .scss file at `./src/styles/global.scss`, use this link: `<link rel="stylesheet" href="{Astro.resolve('../styles/global.css')}">` — **not** `<link rel="stylesheet" href="{Astro.resolve('../styles/global.scss')}">`.
 
 ### 🍃 Tailwind
 
+> Note that Astro's Tailwind support *only* works with Tailwind JIT mode.
+
 Astro can be configured to use [Tailwind][tailwind] easily! Install the dependencies:
 
 ```
@@ -146,16 +148,16 @@ Be sure to add the config path to `astro.config.mjs`, so that Astro enables JIT
   };
 ```
 
-Now you're ready to write Tailwind! Our recommended approach is to create a `public/global.css` file (or whatever you‘d like to name your global stylesheet) with [Tailwind utilities][tailwind-utilities] like so:
+Now you're ready to write Tailwind! Our recommended approach is to create a `src/styles/global.css` file (or whatever you‘d like to name your global stylesheet) with [Tailwind utilities][tailwind-utilities] like so:
 
 ```css
-/* public/global.css */
+/* src/styles/global.css */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 ```
 
-As an alternative to `public/global.css`, You may also add Tailwind utilities to individual `pages/*.astro` components in `<style>` tags, but be mindful of duplication! If you end up creating multiple Tailwind-managed stylesheets for your site, make sure you're not sending the same CSS to users over and over again in separate CSS files.
+As an alternative to `src/styles/global.css`, You may also add Tailwind utilities to individual `pages/*.astro` components in `<style>` tags, but be mindful of duplication! If you end up creating multiple Tailwind-managed stylesheets for your site, make sure you're not sending the same CSS to users over and over again in separate CSS files.
 
 ### Importing from npm
 
@@ -324,15 +326,13 @@ In Astro, we recommend the following setup for this:
 And in your local filesystem, you can even use Sass' [@use][sass-use] to combine files together effortlessly:
 
 ```
-├── public/
+├── src/
 │   └── styles/
 │       ├── _base.scss
 │       ├── _tokens.scss
 │       ├── _typography.scss
 │       ├── _utils.scss
 │       └── global.scss
-└── src/
-    └── (pages)
 ```
 
 What's in each file is up to you to determine, but start small, add utilities as you need them, and you'll keep your CSS weight incredibly low. And utilities you wrote to meet your real needs will always be better than anything off the shelf.