From eae6749c5fef6ea2dd89c1513a40bc4bc81eff14 Mon Sep 17 00:00:00 2001 From: Jam Balaya Date: Mon, 16 Dec 2024 10:29:09 +0900 Subject: [PATCH] docs: update `tailwind.config.ts` to use `satisfies` operator (#73924) Co-authored-by: Lee Robinson --- docs/01-app/01-getting-started/05-css-and-styling.mdx | 5 ++--- .../05-styling/02-tailwind-css.mdx | 9 ++++----- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/docs/01-app/01-getting-started/05-css-and-styling.mdx b/docs/01-app/01-getting-started/05-css-and-styling.mdx index 4b1c17b367342..86d1f8382b3ed 100644 --- a/docs/01-app/01-getting-started/05-css-and-styling.mdx +++ b/docs/01-app/01-getting-started/05-css-and-styling.mdx @@ -117,7 +117,7 @@ Inside your Tailwind configuration file, add paths to the files that will use th ```ts filename="tailwind.config.ts" highlight={5-7} switcher import type { Config } from 'tailwindcss' -const config: Config = { +export default { content: [ './app/**/*.{js,ts,jsx,tsx,mdx}', // Or if using `src` directory: @@ -127,8 +127,7 @@ const config: Config = { extend: {}, }, plugins: [], -} -export default config +} satisfies Config ``` ```js filename="tailwind.config.js" highlight={4-6} switcher diff --git a/docs/01-app/03-building-your-application/05-styling/02-tailwind-css.mdx b/docs/01-app/03-building-your-application/05-styling/02-tailwind-css.mdx index 84ec16172a35e..e161b60b02bef 100644 --- a/docs/01-app/03-building-your-application/05-styling/02-tailwind-css.mdx +++ b/docs/01-app/03-building-your-application/05-styling/02-tailwind-css.mdx @@ -20,10 +20,10 @@ npx tailwindcss init -p Inside your Tailwind configuration file, add paths to the files that will use Tailwind class names: -```ts filename="tailwind.config.ts" switcher +```ts filename="tailwind.config.ts" highlight={5-10} switcher import type { Config } from 'tailwindcss' -const config: Config = { +export default { content: [ './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory. './pages/**/*.{js,ts,jsx,tsx,mdx}', @@ -36,11 +36,10 @@ const config: Config = { extend: {}, }, plugins: [], -} -export default config +} satisfies Config ``` -```js filename="tailwind.config.js" switcher +```js filename="tailwind.config.js" highlight={4-9} switcher /** @type {import('tailwindcss').Config} */ module.exports = { content: [