pnpm i @tailwindcss/vite@next omi tailwindcss@next vite
package.json:
{
"type": "module",
"dependencies": {
"@tailwindcss/vite": "4.0.0-alpha.24",
"omi": "^7.7.0",
"tailwindcss": "4.0.0-alpha.24",
"vite": "^5.4.5"
},
"scripts": {
"build": "vite build",
"dev": "vite dev",
"preview": "vite preview"
}
}
vite.config.ts:
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [tailwindcss()],
})
tsconfig.json:
{
"compilerOptions": {
"target": "ES5",
"experimentalDecorators": true,
"useDefineForClassFields": true,
"lib": [
"ES6",
"DOM",
"DOM.Iterable"
],
"skipLibCheck": true,
/* Bundler mode */
"allowImportingTsExtensions": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"jsxFactory": "h",
"jsxFragmentFactory": "h.f",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": [
"src"
],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}
tsconfig.node.json:
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": [
"vite.config.ts"
]
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<counter-demo />
<script src="src/index.tsx" type="module"></script>
</body>
</html>
src/index.css:
@import "tailwindcss";
src/index.tsx:
import { signal, tag, Component, h } from "omi";
import css from "./index.css?inline";
const count = signal(0);
function add() {
count.value++;
}
function sub() {
count.value--;
}
@tag("counter-demo")
class CounterDemo extends Component {
static css = css;
content() {
const gt = count.value >= 0;
if (gt) {
return <span class="text-green-500">{count.value}</span>;
}
return <span class="text-red-500">{count.value}</span>;
}
render() {
return (
<>
<button onClick={sub} type="button">
-
</button>
{this.content()}
<button onClick={add} type="button">
+
</button>
</>
);
}
}