diff --git a/src/routes/concepts/components/class-style.mdx b/src/routes/concepts/components/class-style.mdx index b13c1bb1c..42ffef2d4 100644 --- a/src/routes/concepts/components/class-style.mdx +++ b/src/routes/concepts/components/class-style.mdx @@ -107,4 +107,4 @@ For a single conditional class, using `class` might be simpler but as the number Additionally, since `classList` is a pseudo-attribute, it doesn't work in prop spreads like `
` or in ``. -For a guide on how to style your components, see [Styling Your Components](/guides/styling-your-components), where we cover the different ways to style your components using libraries such as [TailwindCSS](https://tailwindcss.com/). +For a guide on how to style your components, see [Styling Your Components](/guides/styling-your-components), where we cover the different ways to style your components using libraries such as [Tailwind CSS](https://tailwindcss.com/). diff --git a/src/routes/guides/styling-components/tailwind-v3.mdx b/src/routes/guides/styling-components/tailwind-v3.mdx index 01cae8f88..cd820ad7e 100644 --- a/src/routes/guides/styling-components/tailwind-v3.mdx +++ b/src/routes/guides/styling-components/tailwind-v3.mdx @@ -1,5 +1,5 @@ --- -title: TailwindCSS v3 +title: Tailwind CSS v3 order: 7 mainNavExclude: true --- @@ -64,7 +64,7 @@ bunx tailwindcss init -p
-3. Since TailwindCSS is configuration-driven, after initializing, a `tailwind.config.js` file will be created at the root of your project directory: +3. Since Tailwind CSS is configuration-driven, after initializing, a `tailwind.config.js` file will be created at the root of your project directory: ```js /** @type {import('tailwindcss').Config} */ @@ -91,7 +91,7 @@ In your `src/index.css` file, add the following Tailwind directives: These directives inform PostCSS that you're using Tailwind and establish the order of the directives. You can append custom CSS below these directives. -## Import TailwindCSS +## Import Tailwind CSS Import your `index.css` file into the root `index.jsx` or `index.tsx` file: diff --git a/src/routes/guides/styling-components/tailwind.mdx b/src/routes/guides/styling-components/tailwind.mdx index c66b96d12..32dc3057b 100644 --- a/src/routes/guides/styling-components/tailwind.mdx +++ b/src/routes/guides/styling-components/tailwind.mdx @@ -1,12 +1,12 @@ --- -title: TailwindCSS +title: Tailwind CSS order: 5 mainNavExclude: true --- -This guide is for TailwindCSS v4. For **Tailwind CSS v3** refer to [TailwindCSS v3](/guides/styling-components/tailwind-v3). +This guide is for Tailwind CSS v4. For **Tailwind CSS v3** refer to [Tailwind CSS v3](/guides/styling-components/tailwind-v3). @@ -59,7 +59,7 @@ export default { For a deeper dive into configuration, you can check out the [Tailwind Official Documentation](https://tailwindcss.com/docs/configuration). -## Import TailwindCSS +## Import Tailwind CSS Add an `@import` to your `src/index.css` file that imports Tailwind CSS. diff --git a/src/routes/guides/styling-your-components.mdx b/src/routes/guides/styling-your-components.mdx index cef367cbb..611acbf3f 100644 --- a/src/routes/guides/styling-your-components.mdx +++ b/src/routes/guides/styling-your-components.mdx @@ -54,7 +54,7 @@ CSS frameworks provide pre-styled components and utility classes to speed up dev