From a000e4a5052b30153d731bfcf881e6e8b4aabc99 Mon Sep 17 00:00:00 2001
From: Grant Kennedy <grant@gmkennedy.com>
Date: Fri, 3 Jan 2025 00:55:58 +0900
Subject: [PATCH] templates: reorders postcss plugins in the website template
 for tailwind compatibility (#10176)

<!--

Thank you for the PR! Please go through the checklist below and make
sure you've completed all the steps.

Please review the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository if you haven't already.

The following items will ensure that your PR is handled as smoothly as
possible:

- PR Title must follow conventional commits format. For example, `feat:
my new feature`, `fix(plugin-seo): my fix`.
- Minimal description explained as if explained to someone not
immediately familiar with the code.
- Provide before/after screenshots or code diffs if applicable.
- Link any related issues/discussions from GitHub or Discord.
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Fixes #

-->

This The plugin order in postcss.config.js was causing UI rendering
issues in mobile Safari (#10135). This pull request affects the website
template and the vercel website template.

Current version:
```
// Website template:  /templates/website/postcss.config.js
// Vercel website template: /templates/with-vercel-website/postcss.config.js

export default {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
}
```
PostCSS was loading Autoprefixer before Tailwind and the vendor prefixes
were not properly being prepended.

Fixed version (per [Tailwind
docs](https://tailwindcss.com/docs/browser-support)):

```
export default {
  plugins: {
    tailwindcss: {}, // this is first
    autoprefixer: {}, // this is second
  },
}
```
---
 templates/website/postcss.config.js             | 2 +-
 templates/with-vercel-website/postcss.config.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/website/postcss.config.js b/templates/website/postcss.config.js
index ebf881f82e1..2e7af2b7f1a 100644
--- a/templates/website/postcss.config.js
+++ b/templates/website/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
   plugins: {
-    autoprefixer: {},
     tailwindcss: {},
+    autoprefixer: {},
   },
 }
diff --git a/templates/with-vercel-website/postcss.config.js b/templates/with-vercel-website/postcss.config.js
index ebf881f82e1..2e7af2b7f1a 100644
--- a/templates/with-vercel-website/postcss.config.js
+++ b/templates/with-vercel-website/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
   plugins: {
-    autoprefixer: {},
     tailwindcss: {},
+    autoprefixer: {},
   },
 }