From 23e2a2e3ffc222edb583feadca79415f104d893f Mon Sep 17 00:00:00 2001
From: Jacob Marshall <me@jhqcat.com>
Date: Thu, 16 Jan 2025 17:50:56 +0000
Subject: [PATCH] docs(styles): add Tailwind CSS (#351)

Co-authored-by: Marco Pasqualetti <marco.pasqualetti@live.com>
---
 .../src/components/Sidebar/sidebarElements.ts |  5 ++
 .../documentation/styles/tailwind-css.mdx     | 55 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 apps/documentation/src/routes/documentation/styles/tailwind-css.mdx

diff --git a/apps/documentation/src/components/Sidebar/sidebarElements.ts b/apps/documentation/src/components/Sidebar/sidebarElements.ts
index 13878242..5f8dac62 100644
--- a/apps/documentation/src/components/Sidebar/sidebarElements.ts
+++ b/apps/documentation/src/components/Sidebar/sidebarElements.ts
@@ -170,6 +170,11 @@ export const sidebarElements: Array<SidebarElement> = [
         label: 'CSS modules',
         href: '/documentation/styles/css-modules',
       },
+      {
+        type: 'element',
+        label: 'Tailwind CSS',
+        href: '/documentation/styles/tailwind-css',
+      },
     ],
   },
   {
diff --git a/apps/documentation/src/routes/documentation/styles/tailwind-css.mdx b/apps/documentation/src/routes/documentation/styles/tailwind-css.mdx
new file mode 100644
index 00000000..d93a7028
--- /dev/null
+++ b/apps/documentation/src/routes/documentation/styles/tailwind-css.mdx
@@ -0,0 +1,55 @@
+import MetaTags from '@/components/MetaTags'
+
+<MetaTags
+  title="Tuono - Tailwind CSS"
+  canonical="https://tuono.dev/documentation/styles/css-modules"
+/>
+
+import Breadcrumbs from '@/components/Breadcrumbs'
+
+<Breadcrumbs breadcrumbs={[{ label: 'Tailwind CSS' }]} />
+
+# Tailwind CSS
+
+[Tailwind CSS](https://tailwindcss.com) is a popular utility-first CSS framework. Tuono support starts from Tailwind CSS v4.
+
+## Installation
+
+1. Install Tailwind CSS via your Node.js preferred package manager.
+
+   ```sh
+   npm install tailwindcss@next @tailwindcss/vite@next
+   ```
+
+2. Add the Tailwind CSS vite plugin to `tuono.config.ts`, as seen in the example below:
+
+   ```ts
+   import type { TuonoConfig } from 'tuono/config'
+   import tailwindcss from '@tailwindcss/vite'
+
+   const config: TuonoConfig = {
+     vite: {
+       plugins: [tailwindcss()],
+     },
+   }
+
+   export default config
+   ```
+
+3. Add the Tailwind CSS directives to `src/styles/global.css`.
+
+   ```css
+   @import 'tailwindcss';
+   ```
+
+## Usage
+
+Tailwind CSS is ready to go! You can now start using utility classes anywhere in your app.
+
+```tsx
+import { JSX } from 'react'
+
+export default function Example(): JSX.Element {
+  return <h1 className="text-6xl font-bold">Tuono + Tailwind CSS!</h1>
+}
+```