feat(dev): stabilize PostCSS and Tailwind options (#5960)

.changeset/postcss-option.md

@@ -0,0 +1,50 @@
+---
+"@remix-run/dev": minor
+"@remix-run/react": minor
+"@remix-run/server-runtime": minor
+---
+
+Stabilize built-in PostCSS support via the new `postcss` option in `remix.config.js`. As a result, the `future.unstable_postcss` option has also been deprecated.
+
+The `postcss` option is `false` by default, but when set to `true` will enable processing of all CSS files using PostCSS if `postcss.config.js` is present.
+
+If you followed the original PostCSS setup guide for Remix, you may have a folder structure that looks like this, separating your source files from its processed output:
+
+```
+.
+├── app
+│   └── styles (processed files)
+│       ├── app.css
+│       └── routes
+│           └── index.css
+└── styles (source files)
+    ├── app.css
+    └── routes
+        └── index.css
+```
+
+After you've enabled the new `postcss` option, you can delete the processed files from `app/styles` folder and move your source files from `styles` to `app/styles`:
+
+```
+.
+├── app
+│   └── styles (source files)
+│       ├── app.css
+│       └── routes
+│           └── index.css
+```
+
+You should then remove `app/styles` from your `.gitignore` file since it now contains source files rather than processed output.
+
+You can then update your `package.json` scripts to remove any usage of `postcss` since Remix handles this automatically. For example, if you had followed the original setup guide:
+
+```diff
+{
+  "scripts": {
+-    "dev:css": "postcss styles --base styles --dir app/styles -w",
+-    "build:css": "postcss styles --base styles --dir app/styles --env production",
+-    "dev": "concurrently \"npm run dev:css\" \"remix dev\""
++    "dev": "remix dev"
+  }
+}
+```

.changeset/tailwind-option.md

@@ -0,0 +1,49 @@
+---
+"@remix-run/dev": minor
+"@remix-run/react": minor
+"@remix-run/server-runtime": minor
+---
+
+Stabilize built-in Tailwind support via the new `tailwind` option in `remix.config.js`. As a result, the `future.unstable_tailwind` option has also been deprecated.
+
+The `tailwind` option is `false` by default, but when set to `true` will enable built-in support for Tailwind functions and directives in your CSS files if `tailwindcss` is installed.
+
+If you followed the original Tailwind setup guide for Remix and want to make use of this feature, you should first delete the generated `app/tailwind.css`.
+
+Then, if you have a `styles/tailwind.css` file, you should move it to `app/tailwind.css`.
+
+```sh
+rm app/tailwind.css
+mv styles/tailwind.css app/tailwind.css
+```
+
+Otherwise, if you don't already have an `app/tailwind.css` file, you should create one with the following contents:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+You should then remove `/app/tailwind.css` from your `.gitignore` file since it now contains source code rather than processed output.
+
+You can then update your `package.json` scripts to remove any usage of `tailwindcss` since Remix handles this automatically. For example, if you had followed the original setup guide:
+
+```diff
+{
+  // ...
+  "scripts": {
+-    "build": "run-s \"build:*\"",
++    "build": "remix build",
+-    "build:css": "npm run generate:css -- --minify",
+-    "build:remix": "remix build",
+-    "dev": "run-p \"dev:*\"",
++    "dev": "remix dev",
+-    "dev:css": "npm run generate:css -- --watch",
+-    "dev:remix": "remix dev",
+-    "generate:css": "npx tailwindcss -o ./app/tailwind.css",
+    "start": "remix-serve build"
+  }
+  // ...
+}
+```

docs/file-conventions/remix-config.md

@@ -66,6 +66,10 @@ dotfiles (like `.DS_Store` files) or CSS/test files you wish to colocate.
 The URL prefix of the browser build with a trailing slash. Defaults to
 `"/build/"`. This is the path the browser will use to find assets.
 
+## postcss
+
+Whether to process CSS using [PostCSS][postcss] if `postcss.config.js` is present. Defaults to `false`.
+
 ## routes
 
 A function for defining custom routes, in addition to those already defined
@@ -192,6 +196,10 @@ Defaults to `"cjs"`.
 The platform the server build is targeting, which can either be `"neutral"` or
 `"node"`. Defaults to `"node"`.
 
+## tailwind
+
+Whether to support [Tailwind functions and directives][tailwind-functions-and-directives] in CSS files if `tailwindcss` is installed. Defaults to `false`.
+
 ## watchPaths
 
 An array, string, or async function that defines custom directories, relative to the project root, to watch while running [remix dev][remix-dev]. These directories are in addition to [`appDirectory`][app-directory].
@@ -232,3 +240,5 @@ There are a few conventions that Remix uses you should be aware of.
 [remix-dev]: ../other-api/dev#remix-dev
 [app-directory]: #appDirectory
 [css-side-effect-imports]: ../guides/styling#css-side-effect-imports
+[postcss]: https://postcss.org
+[tailwind-functions-and-directives]: https://tailwindcss.com/docs/functions-and-directives