[create-next-app]: add mdx files to tailwind content config (#48188)

This PR updates create-next-app's tailwind config to consider .mdx files when it generates styles. If you're using MDX, most of a project's styles are generated by the other file flags, which can make it tricky to debug/notice the rare subset from .mdx only. x-ref: https://vercel.slack.com/archives/C0290CZ3U6Q/p1680976472444189 --------- Co-authored-by: JJ Kasper <jj@jjsweb.site>
vercel · Apr 13, 2023 · ab21349 · ab21349
1 parent 37f709e
commit ab21349
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 14 deletions.
diff --git a/packages/create-next-app/templates/app-tw/js/tailwind.config.js b/packages/create-next-app/templates/app-tw/js/tailwind.config.js
@@ -1,9 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx}',
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {

diff --git a/packages/create-next-app/templates/app-tw/ts/tailwind.config.js b/packages/create-next-app/templates/app-tw/ts/tailwind.config.js
@@ -1,9 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx}',
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {

diff --git a/packages/create-next-app/templates/default-tw/js/tailwind.config.js b/packages/create-next-app/templates/default-tw/js/tailwind.config.js
@@ -1,9 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx}',
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {

diff --git a/packages/create-next-app/templates/default-tw/ts/tailwind.config.js b/packages/create-next-app/templates/default-tw/ts/tailwind.config.js
@@ -1,9 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    './pages/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{js,ts,jsx,tsx}',
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {

diff --git a/packages/create-next-app/templates/index.ts b/packages/create-next-app/templates/index.ts
@@ -150,8 +150,8 @@ export const installTemplate = async ({
         (
           await fs.promises.readFile(tailwindConfigFile, 'utf8')
         ).replace(
-          /\.\/(\w+)\/\*\*\/\*\.\{js,ts,jsx,tsx\}/g,
-          './src/$1/**/*.{js,ts,jsx,tsx}'
+          /\.\/(\w+)\/\*\*\/\*\.\{js,ts,jsx,tsx,mdx\}/g,
+          './src/$1/**/*.{js,ts,jsx,tsx,mdx}'
         )
       )
     }