TailwindCSS

Tailwind CSS 是一个按需使用的 CSS 工具库，作为内置 PostCSS 插件与 Solid 无缝集成。

安装

1. 安装 Tailwind CSS 作为依赖项：

2. 接下来，运行 init 命令来生成 tailwind.config.js 和 postcss.config.js 。

3. 由于 TailwindCSS 是配置驱动的，初始化后，将在项目目录的根目录下创建一个 tailwind.config.js 文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

要更深入地了解配置，您可以查看 Tailwind 官方文档。

添加 Tailwind 指令

在您的 src/index.css 文件中，添加以下 Tailwind 指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

这些指令通知 PostCSS 您正在使用 Tailwind 并确定指令的顺序。您可以在这些指令下方附加自定义 CSS。

导入 TailwindCSS

将 index.css 文件导入到根 index.jsx 或 index.tsx 文件中：

import { render } from "solid-js/web"
import App from "./App"
import "./index.css"

render(() => <App />, document.getElementById('root') as HTMLElement);

用法

设置 Tailwind CSS 后，您现在可以使用它的实用工具类。例如，如果您以前有一个 Card.css 文件，您可以替换或删除它：

/* Remove or replace these styles with Tailwind utility classes */

使用 Tailwind 工具类更新您的组件：

function Card() {
  return (
    <div class="grid place-items-center min-h-screen">
      <div class="h-[160px] aspect aspect-[2] rounded-[16px] shadow-[0_0_0_4px_hsl(0_0%_0%_/_15%)]">
        Hello, world!
      </div>
    </div>
  );
}

支持

如需其他帮助，请参阅 Tailwind CSS/Vite 集成指南 。