Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/routes/concepts/components/class-style.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<div {...props} />` or in `<Dynamic>`.
</Callout>

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/).
6 changes: 3 additions & 3 deletions src/routes/guides/styling-components/tailwind-v3.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: TailwindCSS v3
title: Tailwind CSS v3
order: 7
mainNavExclude: true
---
Expand Down Expand Up @@ -64,7 +64,7 @@ bunx tailwindcss init -p
</div>
</TabsCodeBlocks>

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} */
Expand All @@ -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:

Expand Down
6 changes: 3 additions & 3 deletions src/routes/guides/styling-components/tailwind.mdx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
title: TailwindCSS
title: Tailwind CSS
order: 5
mainNavExclude: true
---

<Callout type="info" title="Note">

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).

</Callout>

Expand Down Expand Up @@ -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.

Expand Down
2 changes: 1 addition & 1 deletion src/routes/guides/styling-your-components.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ CSS frameworks provide pre-styled components and utility classes to speed up dev
<div class="flex flex-col md:grid md:grid-cols-2 md:grid-rows-1 gap-3">

<ImageLinks
title="TailwindCSS"
title="Tailwind CSS"
href="/guides/styling-components/tailwind"
logo="tailwind"
/>
Expand Down