Tailwind CSS

Installation

Follow the Tailwind CSS installation instructions for your chosen framework or build system

VS Code Extension

Add the following to the .vscode/extensions.json file.

{
  "recommendations": [
    . . .
    "bradlc.vscode-tailwindcss"
  ]
}

clsx() Utility

tip

Source: clsx() Tailwind Support

The clsx() utility is useful for constructing className strings conditionally.

Install it by using this command:

pnpm add --save clsx

Then add the following property to the .vscode/settings.json file. This will allow the Tailwind VS Code extension to continue working:

{
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}

Official Prettier Plugin

info

Source: prettier-plugin-tailwindcss

Install prettier-plugin-tailwindcss by using this command:

pnpm add --save-dev --save-exact prettier-plugin-tailwindcss

Then add the plugin to the .prettierrc file:

{
  "plugins": ["🟡...Other Plugins", "prettier-plugin-tailwindcss"],
  "tailwindStylesheet": "{🟡 PATH_TO_CSS_FILE_ENTRY_POINT_THAT_IMPORTS_TAILWIND}",
  "tailwindFunctions": ["clsx"]
}

Unofficial ESLint Plugin

warning

As of 04/08/2025

There is no official ESLint plugin released for Tailwind CSS.
There is the unofficial but decently popular eslint-plugin-tailwindcss. However it is NOT YET compatible with Tailwind v4.0
@eslint/css has a language option for custom TailwindCSS syntax. However, it has not been updated for TailwindCSS 4.0. That section of the config might need to be commented out until the language option has been updated

Install eslint-plugin-tailwindcss by running this command:

pnpm add --save-dev eslint-plugin-tailwindcss

Update the eslint.config.mjs file with the following:

// ...
import { tailwindSyntax } from "@eslint/css/syntax";
import tailwind from "eslint-plugin-tailwindcss";

// ...

export default defineConfig([
  // ...
   {
    files: ["**/*.{js,jsx,ts,tsx,mjs,cjs,mts,cts}"],
    extends: [
      // ...
      // TODO: Does this work yet for TailwindCSS v4.0?
      tailwind.configs["flat/recommended"],
    ],
    rules: { ... },
  },
  // TODO: Does this work yet for TailwindCSS v4.0?
  {
    files: ["**/*.css"],
    // ...
    languageOptions: {
      tolerant: true, // 🟡 This may be required due to custom syntax that TailwindCSS uses
      customSyntax: tailwindSyntax, // 🟡 This has not been updated yet for TailwindCSS v4.0
    },
  },
]);

Project Documentation

Update `98-vs-code/02-vs-code-extensions.md` Documentation

Add the following to the docusaurus/docs/98-vs-code/02-vs-code-extensions.md documentation

docusaurus/docs/98-vs-code/02-vs-code-extensions.md
| [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) | Enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting |

Create `03-libraries-tools/01-tailwind-css.md` Documentation

docusaurus/docs/03-libraries-tools/01-tailwind-css.md
# Tailwind CSS

[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

:::tip
Verify that designs utilize Tailwind defaults; except for where this application has overwritten or extended Tailwind's preflight or theme defaults. Custom spacing, sizing, colors, typography, etc, should rarely be needed
Useful Links:

- [https://tailwindcss.com/docs/preflight](https://tailwindcss.com/docs/preflight)
- [https://tailwindcss.com/docs/preflight#extending-preflight](https://tailwindcss.com/docs/preflight#extending-preflight)
- [https://tailwindcss.com/docs/theme](https://tailwindcss.com/docs/theme)
- [https://tailwindcss.com/docs/theme#customizing-your-theme](https://tailwindcss.com/docs/theme#customizing-your-theme)
- [https://tailwindcss.com/docs/adding-custom-styles](https://tailwindcss.com/docs/adding-custom-styles)

:::

## clsx() Utility

:::info
Source: [clsx() Tailwind Support](https://github.com/lukeed/clsx?tab=readme-ov-file#tailwind-support)
:::

The [`clsx()`](https://github.com/lukeed/clsx) utility is useful for constructing `className` strings conditionally. You may find the `clsx/lite` module useful within Tailwind contexts. This is especially true if/when your application only composes classes in this pattern:

```ts
import clsx from "clsx/lite";

clsx("text-base", props.active && "text-primary", props.className);
```

The [Tailwind CSS IntelliSense VS Code Extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) requires the following setting to be configured in VS Code `settings.json` in order for class autocompletion to continue working when using `clsx()`

```json
{
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ]
}
```

This setting has been added to the shared workspace settings file: `.vscode/settings.json`

## Official Prettier Plugin

[`prettier-plugin-tailwindcss`](https://www.npmjs.com/package/prettier-plugin-tailwindcss) automatically sorts classes based on their [recommended class order](https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted). Refer to plugin's documentation if it doesn't work for classes in function calls or template literals, or if it does something that the team finds annoying.

## 🚧 Unofficial ESLint Plugin

:::warning
As of 04/08/2025

- There is no official ESLint plugin released for Tailwind CSS.
- There is the unofficial but decently popular [`eslint-plugin-tailwindcss`](https://www.npmjs.com/package/eslint-plugin-tailwindcss). However it is NOT YET compatible with Tailwind v4.0
- `@eslint/css` has a language option for custom TailwindCSS syntax. However, it has not been updated for TailwindCSS 4.0. That section of the config might need to be commented out until the language option has been updated

:::

🚧 TODO: More comments may be useful here if/when this plugin works for Tailwind v4.0. Or maybe this section isn't needed.

## Using Color Utilities

:::info
Source: [https://tailwindcss.com/docs/colors#using-color-utilities](https://tailwindcss.com/docs/colors#using-color-utilities)
:::

Use color utilities like `bg-white`, `border-pink-300`, and `text-gray-950` to set the different color properties of elements in your design:

| Utility         | Description                                                                                                   |
| --------------- | ------------------------------------------------------------------------------------------------------------- |
| bg-\*           | Sets the [background color](https://tailwindcss.com/docs/background-color) of an element                      |
| text-\*         | Sets the [text color](https://tailwindcss.com/docs/text-color) of an element                                  |
| decoration-\*   | Sets the [text decoration color](https://tailwindcss.com/docs/text-decoration-color) of an element            |
| border-\*       | Sets the [border color](https://tailwindcss.com/docs/border-color) of an element                              |
| outline-\*      | Sets the [outline color](https://tailwindcss.com/docs/outline-color) of an element                            |
| shadow-\*       | Sets the color of [box shadows](https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color)             |
| inset-shadow-\* | Sets the color of [inset box shadows](https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color) |
| ring-\*         | Sets the color of [ring shadows](https://tailwindcss.com/docs/box-shadow#setting-the-ring-color)              |
| inset-ring-\*   | Sets the color of [inset ring shadows](https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color)  |
| accent-\*       | Sets the [accent color](https://tailwindcss.com/docs/accent-color) of form controls                           |
| caret-\*        | Sets the [caret color](https://tailwindcss.com/docs/caret-color) in form controls                             |
| fill-\*         | Sets the [fill color](https://tailwindcss.com/docs/fill) of SVG elements                                      |
| stroke-\*       | Sets the [stroke color](https://tailwindcss.com/docs/stroke) of SVG elements                                  |

## Using Theme Variables

:::info
Source: [https://tailwindcss.com/docs/theme#theme-variable-namespaces](https://tailwindcss.com/docs/theme#theme-variable-namespaces)
:::

Theme variables are defined in namespaces and each namespace corresponds to one or more utility class or variant APIs.

| Namespace         | Utility classes                                                       |
| ----------------- | --------------------------------------------------------------------- |
| --color-\*        | Color utilities like bg-red-500, text-sky-300, and many more          |
| --font-\*         | Font family utilities like font-sans                                  |
| --text-\*         | Font size utilities like text-xl                                      |
| --font-weight-\*  | Font weight utilities like font-bold                                  |
| --tracking-\*     | Letter spacing utilities like tracking-wide                           |
| --leading-\*      | Line height utilities like leading-tight                              |
| --breakpoint-\*   | Responsive breakpoint variants like sm:\*                             |
| --container-\*    | Container query variants like @sm:\* and size utilities like max-w-md |
| --spacing-\*      | Spacing and sizing utilities like px-4, max-h-16, and many more       |
| --radius-\*       | Border radius utilities like rounded-sm                               |
| --shadow-\*       | Box shadow utilities like shadow-md                                   |
| --inset-shadow-\* | Inset box shadow utilities like inset-shadow-xs                       |
| --drop-shadow-\*  | Drop shadow filter utilities like drop-shadow-md                      |
| --blur-\*         | Blur filter utilities like blur-md                                    |
| --perspective-\*  | Perspective utilities like perspective-near                           |
| --aspect-\*       | Aspect ratio utilities like aspect-video                              |
| --ease-\*         | Transition timing function utilities like ease-out                    |
| --animate-\*      | Animation utilities like animate-spin                                 |

Create `03-libraries-tools/02-theme-configuration.mdx`

This is not as straightforward of a process as I would like, but I believe it is useful information for future devs to have to reference within the project.

Navigate to https://github.com/SamuelMaddox/samuelmaddox/tree/main/docs/dev-notes/04-library-tools/05-tailwind-css and copy it's contents to the docusaurus/docs/03-libraries-tools/ directory.
Delete the 01-library-setup.mdx file.
In the 02-theme-configuration.mdx file, remove the NextJS Font Optimization section if the project is not using NextJS.
In the 02-theme-configuration.mdx file, locate the Theme Selector Component section and remove the tabs and <ThemeSelector> markdown partials that are not relevant to the project's framework.
In the tailwind-css-partials directory, delete _tailwind-css-project-docs.md and theme-selector partials for the frameworks that are not relevant to the project's framework.

Create `99-articles/mastering-design-system-colors` Article

note

I'm paranoid about broken links due to relevant articles being removed. Therefore, when I find an article that I think is relevant to a project, I like to save a copy of that article within the project's documentation.

info

The 03-libraries-tools/02-theme-configuration.mdx documentation links to the following article

Create a docusaurus/docs/99-articles/mastering-design-system-colors directory.
Copy the Mastering Design System Colors article contents into the above directory.
Update the Mastering Design System Colors link in 03-libraries-tools/02-theme-configuration.mdx to point to the new location.

Installation​

VS Code Extension​

clsx() Utility​

Official Prettier Plugin​

Unofficial ESLint Plugin​

Project Documentation​

Update 98-vs-code/02-vs-code-extensions.md Documentation​

Create 03-libraries-tools/01-tailwind-css.md Documentation​

Create 03-libraries-tools/02-theme-configuration.mdx​

Create 99-articles/mastering-design-system-colors Article​