Tailwind CSS 主页
  1. 入门
  2. 使用 Qwik 安装 Tailwind CSS

  1. 创建您的项目

    如果您还没有设置，请先创建一个新的 Qwik 项目。最常见的方法是使用 创建 Qwik。

    终端
    npm create qwik@latest my-projectcd my-project

  2. 安装 Tailwind CSS

    通过 npm 安装 tailwindcss 及其对等依赖项，然后运行 init 命令生成 tailwind.config.js 和 postcss.config.js。

    终端
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

  3. 配置您的模板路径

    在您的 tailwind.config.js 文件中添加所有模板文件的路径。

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

  4. 将 Tailwind 指令添加到您的 CSS

    将 @tailwind 指令添加到您的 ./src/global.css 文件中，以对应 Tailwind 的每个层。

    global.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. 开始您的构建过程

    使用 npm run dev 运行您的构建过程。

    终端
    npm run dev

  6. 开始在您的项目中使用 Tailwind

    开始使用 Tailwind 的实用程序类来设置您的内容样式。

    index.tsx
    import { component$ } from '@builder.io/qwik'

export default component$(() => {
  return (
    <h1 class="text-3xl font-bold underline">
      Hello World!
    </h1>
  )
})