vite tailwindcss@next omi

卓能文發表於2024-09-14
ViteAICSS
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>
			</>
		);
	}
}

相關文章