mjs postcss config is now supported in Next

t3-oss · Oct 26, 2024 · 844435a · 844435a
1 parent eb4e208
commit 844435a
Show file tree

Hide file tree

Showing 19 changed files with 35 additions and 39 deletions.
diff --git a/cli/src/installers/tailwind.ts b/cli/src/installers/tailwind.ts
@@ -23,8 +23,8 @@ export const tailwindInstaller: Installer = ({ projectDir }) => {
   const twCfgSrc = path.join(extrasDir, "config/tailwind.config.ts");
   const twCfgDest = path.join(projectDir, "tailwind.config.ts");
 
-  const postcssCfgSrc = path.join(extrasDir, "config/postcss.config.cjs");
-  const postcssCfgDest = path.join(projectDir, "postcss.config.cjs");
+  const postcssCfgSrc = path.join(extrasDir, "config/postcss.config.js");
+  const postcssCfgDest = path.join(projectDir, "postcss.config.js");
 
   const prettierSrc = path.join(extrasDir, "config/_prettier.config.js");
   const prettierDest = path.join(projectDir, "prettier.config.js");

diff --git a/cli/template/extras/config/_prettier.config.js b/cli/template/extras/config/_prettier.config.js
@@ -1,6 +1,4 @@
 /** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
-const config = {
+export default {
   plugins: ["prettier-plugin-tailwindcss"],
 };
-
-export default config;
diff --git a/cli/template/extras/config/postcss.config.cjs b/cli/template/extras/config/postcss.config.cjs
diff --git a/cli/template/extras/config/postcss.config.js b/cli/template/extras/config/postcss.config.js
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+  },
+};
diff --git a/www/src/components/docs/folderStructureDiagramApp.astro b/www/src/components/docs/folderStructureDiagramApp.astro
@@ -41,7 +41,7 @@
     "next-env.d.ts": [],
     "next.config.js": [],
     "package.json": [],
-    "postcss.config.cjs": ["tailwind"],
+    "postcss.config.js": ["tailwind"],
     "prettier.config.js": ["tailwind"],
     "README.md": [],
     "start-database.sh (mysql or postgres only)": ["drizzle"],

diff --git a/www/src/components/docs/folderStructureDiagramPages.astro b/www/src/components/docs/folderStructureDiagramPages.astro
@@ -38,7 +38,7 @@
     "next-env.d.ts": [],
     "next.config.js": [],
     "package.json": [],
-    "postcss.config.cjs": ["tailwind"],
+    "postcss.config.js": ["tailwind"],
     "prettier.config.js": ["tailwind"],
     "README.md": [],
     "start-database.sh (mysql or postgres only)": ["drizzle"],

diff --git a/www/src/components/navigation/tableOfContents.astro b/www/src/components/navigation/tableOfContents.astro
@@ -39,7 +39,7 @@ const isRtl = getIsRtlFromUrl(pathname);
           case "src/server/auth.ts":
             dataComponentType = "nextauth";
             break;
-          case "postcss.config.cjs":
+          case "postcss.config.js":
           case "prettier.config.mjs":
             dataComponentType = "tailwind";
             break;

diff --git a/www/src/pages/ar/folder-structure-pages.mdx b/www/src/pages/ar/folder-structure-pages.mdx
@@ -198,9 +198,9 @@ import Form from "../../components/docs/folderStructureForm.astro";
 </div>
 <div data-components="tailwind">
 
-### `postcss.config.cjs`
+### `postcss.config.js`
 
-إن ملف `postcss.config.cjs` ضروري عند استخدام TailwindCSS PostCSS، لمزيد من المعلومات [Taiwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss).
+إن ملف `postcss.config.js` ضروري عند استخدام TailwindCSS PostCSS، لمزيد من المعلومات [Taiwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss).
 
 </div>
 <div data-components="tailwind">

diff --git a/www/src/pages/en/folder-structure-app.mdx b/www/src/pages/en/folder-structure-app.mdx
@@ -226,9 +226,9 @@ The `next.config.mjs` file is used to configure Next.js. See [Next.js Docs](http
 </div>
 <div data-components="tailwind">
 
-### `postcss.config.cjs`
+### `postcss.config.js`
 
-The `postcss.config.cjs` file is used for Tailwind PostCSS usage. See [Tailwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss) for more information.
+The `postcss.config.js` file is used for Tailwind PostCSS usage. See [Tailwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss) for more information.
 
 </div>
 <div data-components="tailwind">

diff --git a/www/src/pages/en/folder-structure-pages.mdx b/www/src/pages/en/folder-structure-pages.mdx
@@ -219,9 +219,9 @@ The `next.config.mjs` file is used to configure Next.js. See [Next.js Docs](http
 </div>
 <div data-components="tailwind">
 
-### `postcss.config.cjs`
+### `postcss.config.js`
 
-The `postcss.config.cjs` file is used for Tailwind PostCSS usage. See [Tailwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss) for more information.
+The `postcss.config.js` file is used for Tailwind PostCSS usage. See [Tailwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss) for more information.
 
 </div>
 <div data-components="tailwind">

diff --git a/www/src/pages/es/folder-structure-pages.mdx b/www/src/pages/es/folder-structure-pages.mdx
@@ -206,9 +206,9 @@ El archivo `next.config.mjs` se usa para configurar Next.js. Consulta [la docume
 
 <div data-components="tailwind">
 
-### `postcss.config.cjs`
+### `postcss.config.js`
 
-El archivo `postcss.config.cjs` se usa para la configuración de Tailwind PostCSS. Consulta [la documentación de Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) para obtener más información.
+El archivo `postcss.config.js` se usa para la configuración de Tailwind PostCSS. Consulta [la documentación de Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) para obtener más información.
 
 </div>
 

diff --git a/www/src/pages/fr/folder-structure-pages.mdx b/www/src/pages/fr/folder-structure-pages.mdx
@@ -197,9 +197,9 @@ Le fichier `next.config.mjs` est utilisé pour configurer Next.js. Voir la [docu
 </div>
 <div data-components="tailwind">
 
-### `postcss.config.cjs`
+### `postcss.config.js`
 
-Le fichier `postcss.config.cjs` est utilisé pour l'utilisation de Tailwind PostCSS. Voir la [documentation de Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) pour plus d'informations.
+Le fichier `postcss.config.js` est utilisé pour l'utilisation de Tailwind PostCSS. Voir la [documentation de Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) pour plus d'informations.
 
 </div>
 <div data-components="tailwind">

diff --git a/www/src/pages/ja/folder-structure-pages.mdx b/www/src/pages/ja/folder-structure-pages.mdx
@@ -187,9 +187,9 @@ import Form from "../../components/docs/folderStructureForm.astro";
 </div>
 <div data-components="tailwind">
 
-### `postcss.config.cjs`
+### `postcss.config.js`
 
-Tailwind の PostCSS の利用には、`postcss.config.cjs`ファイルが使用されます。詳しくは[Tailwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss)を参照してください。
+Tailwind の PostCSS の利用には、`postcss.config.js`ファイルが使用されます。詳しくは[Tailwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss)を参照してください。
 
 </div>
 <div data-components="tailwind">

diff --git a/www/src/pages/no/folder-structure-pages.mdx b/www/src/pages/no/folder-structure-pages.mdx
@@ -183,9 +183,9 @@ Basert på dine valgte pakker inneholder denne ruteren flere eller færre ruter
 </div>
 <div data-components="tailwind">
 
-### `postcss.config.cjs`
+### `postcss.config.js`
 
-`postcss.config.cjs`-filen er for bruk av Tailwind PostCSS. Se [Tailwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss) for mer informasjon.
+`postcss.config.js`-filen er for bruk av Tailwind PostCSS. Se [Tailwind PostCSS Docs](https://tailwindcss.com/docs/installation/using-postcss) for mer informasjon.
 
 </div>
 <div data-components="tailwind">

diff --git a/www/src/pages/pl/folder-structure-pages.mdx b/www/src/pages/pl/folder-structure-pages.mdx
@@ -184,9 +184,9 @@ Plik `next.config.mjs` jest używany do konfigurowania Next.js. Po więcej infor
 </div>
 <div data-components="tailwind">
 
-### `postcss.config.cjs`
+### `postcss.config.js`
 
-Plik `postcss.config.cjs` jest używany przez Tailwind PostCSS. Po więcej informacji, zobacz [dokumentację Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss).
+Plik `postcss.config.js` jest używany przez Tailwind PostCSS. Po więcej informacji, zobacz [dokumentację Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss).
 
 </div>
 <div data-components="tailwind">

diff --git a/www/src/pages/pt/folder-structure-pages.mdx b/www/src/pages/pt/folder-structure-pages.mdx
@@ -198,9 +198,9 @@ O arquivo `next.config.mjs` é usado para configura o Next.js. Veja [Documentaç
 </div>
 <div data-components="tailwind">
 
-### `postcss.config.cjs`
+### `postcss.config.js`
 
-O arquivo `postcss.config.cjs` é usado para o uso do Tailwind PostCSS. Veja [Documentação do Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) para mais informações.
+O arquivo `postcss.config.js` é usado para o uso do Tailwind PostCSS. Veja [Documentação do Tailwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) para mais informações.
 
 </div>
 <div data-components="tailwind">

diff --git a/www/src/pages/ru/folder-structure-pages.mdx b/www/src/pages/ru/folder-structure-pages.mdx
@@ -198,9 +198,9 @@ import Form from "../../components/docs/folderStructureForm.astro";
 </div>
 <div data-components="tailwind">
 
-### `postcss.config.cjs`
+### `postcss.config.js`
 
-Файл `postcss.config.cjs` используется для использования Tailwind PostCSS. Смотрите [документацию Taiwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) для получения дополнительной информации.
+Файл `postcss.config.js` используется для использования Tailwind PostCSS. Смотрите [документацию Taiwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) для получения дополнительной информации.
 
 </div>
 <div data-components="tailwind">

diff --git a/www/src/pages/uk/folder-structure-pages.mdx b/www/src/pages/uk/folder-structure-pages.mdx
@@ -198,9 +198,9 @@ import Form from "../../components/docs/folderStructureForm.astro";
 </div>
 <div data-components="tailwind">
 
-### `postcss.config.cjs`
+### `postcss.config.js`
 
-Файл `postcss.config.cjs` використовується для використання Tailwind PostCSS. Дивіться [документацію Taiwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) для отримання додаткової інформації.
+Файл `postcss.config.js` використовується для використання Tailwind PostCSS. Дивіться [документацію Taiwind PostCSS](https://tailwindcss.com/docs/installation/using-postcss) для отримання додаткової інформації.
 
 </div>
 <div data-components="tailwind">

diff --git a/www/src/pages/zh-hans/folder-structure-pages.mdx b/www/src/pages/zh-hans/folder-structure-pages.mdx
@@ -185,9 +185,9 @@ root.ts 文件用于合并 tRPC 子路由并将它们导出为一个单一的路
 </div>
 <div data-components="tailwind">
 
-### `postcss.config.cjs`
+### `postcss.config.js`
 
-文件 `postcss.config.cjs` 被用于配置 Tailwind PostCSS 的用法。参看 [Tailwind PostCSS 文档](https://tailwindcss.com/docs/installation/using-postcss) 来了解更多。
+文件 `postcss.config.js` 被用于配置 Tailwind PostCSS 的用法。参看 [Tailwind PostCSS 文档](https://tailwindcss.com/docs/installation/using-postcss) 来了解更多。
 
 </div>
 <div data-components="tailwind">