Skip to content

Commit

Permalink
docs: update tailwind.config.ts to use satisfies operator
Browse files Browse the repository at this point in the history
  • Loading branch information
JamBalaya56562 committed Dec 16, 2024
1 parent dc3bdd8 commit 63bb3bd
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 13 deletions.
5 changes: 2 additions & 3 deletions docs/01-app/01-getting-started/05-css-and-styling.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -127,8 +127,7 @@ const config: Config = {
extend: {},
},
plugins: [],
}
export default config
} satisfies Config
```

```js filename="tailwind.config.js" highlight={4-6} switcher
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,29 @@ 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
<AppOnly>

```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}', // Note the addition of the `app` directory.
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
// Or if using `src` directory:
'./src/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
} satisfies Config
```

```js filename="tailwind.config.js" highlight={4-6} switcher
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
// Or if using `src` directory:
'./src/**/*.{js,ts,jsx,tsx,mdx}',
],
Expand All @@ -37,17 +51,33 @@ const config: Config = {
},
plugins: [],
}
export default config
```

```js filename="tailwind.config.js" switcher
</AppOnly>

<PagesOnly>

```ts filename="tailwind.config.ts" highlight={5-7} switcher
import type { Config } from 'tailwindcss'

export default {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
// Or if using `src` directory:
'./src/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {},
},
plugins: [],
} satisfies Config
```

```js filename="tailwind.config.js" highlight={4-6} switcher
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory.
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',

// Or if using `src` directory:
'./src/**/*.{js,ts,jsx,tsx,mdx}',
],
Expand All @@ -58,6 +88,8 @@ module.exports = {
}
```

</PagesOnly>

You do not need to modify `postcss.config.js`.

<AppOnly>
Expand Down

0 comments on commit 63bb3bd

Please sign in to comment.