feat: add a with-tailwind example (#359)

Co-authored-by: Marco Pasqualetti <marco.pasqualetti@live.com>
2026-07-25 12:52:47 -07:00 · 2025-01-18 19:44:45 +00:00
parent 96deea7f31
commit 5dae5c31b7
13 changed files with 534 additions and 95 deletions
@@ -0,0 +1,13 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.tuono
+out
+target
@@ -0,0 +1,11 @@
+[package]
+name = "with-tailwind"
+version = "0.0.1"
+edition = "2021"
+
+[[bin]]
+name = "tuono"
+path = ".tuono/main.rs"
+
+[dependencies]
+tuono_lib = { path = "../../crates/tuono_lib/" }
@@ -0,0 +1,9 @@
+# Tuono with Tailwind CSS starter
+
+This is the starter project for using Tuono and Tailwind CSS. To download it run in your terminal:
+
+```shell
+tuono new [NAME] --template with-tailwind
+```
+
+To learn about how to set this up yourself, read our [Tailwind CSS documentation page](https://tuono.dev/documentation/styles/tailwind-css).
@@ -0,0 +1,17 @@
+{
+  "name": "with-tailwind",
+  "description": "Basic tuono application with tailwind",
+  "version": "0.0.1",
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.0-beta.9",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0-beta.9",
+    "tuono": "link:../../packages/tuono"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "typescript": "^5.6.3"
+  }
+}
@@ -0,0 +1,18 @@
+import type { ReactNode, JSX } from 'react'
+
+interface RootLayoutProps {
+  children: ReactNode
+}
+
+export default function RootLayout({ children }: RootLayoutProps): JSX.Element {
+  return (
+    <html>
+      <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </head>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
@@ -0,0 +1,26 @@
+import type { JSX } from 'react'
+
+export default function IndexPage(): JSX.Element {
+  return (
+    <div className="min-h-screen flex items-center justify-normal sm:justify-center p-4">
+      <div className="bg-white rounded-lg p-8 border-0 sm:border border-neutral-200 max-w-[unset] sm:max-w-md w-full">
+        <h1 className="text-4xl font-bold mb-4 text-center">
+          Welcome to Tuono
+        </h1>
+        <p className="text-gray-600 text-center mb-6">
+          This is a simple example of how to use Tailwind CSS utility classes in
+          Tuono.
+        </p>
+        <div className="flex flex-wrap gap-3 justify-center">
+          <a
+            href="https://tuono.dev"
+            target="_blank"
+            className="text-blue-600 underline hover:text-black flex items-center gap-1"
+          >
+            Tuono Documentation
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1 @@
+@import 'tailwindcss';
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "tuono.config.ts"]
+}
@@ -0,0 +1,10 @@
+import type { TuonoConfig } from 'tuono/config'
+import tailwindcss from '@tailwindcss/vite'
+
+const config: TuonoConfig = {
+  vite: {
+    plugins: [tailwindcss()],
+  },
+}
+
+export default config