个人博客

FOGBeta

Tailwindcss 简单使用

2
2025-05-11

将 Tailwind CSS 安装为 Vite 插件是将其与 Laravel、SvelteKit、React Router、Nuxt 和 SolidJS 等框架集成的最无缝方式。

它快速、灵活且可靠 — 具有零运行时间。

安装 Tailwind CSS 作为 Vite 插件

将 Tailwind CSS 安装为 Vite 插件是将其与 Laravel、SvelteKit、React Router、Nuxt 和 SolidJS 等框架集成的最无缝方式。

  • 安装 Tailwind CSS

通过 npm 安装 tailwindcss 和 @tailwindcss/vite。

//Termina
npm install tailwindcss @tailwindcss/vite

  • 配置 Vite 插件

将 @tailwindcss/vite 插件添加到你的 Vite 配置中。

//vite.config.ts
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'

  • 导入 Tailwind CSS

在你的 CSS 文件中添加一个 @import 以导入 Tailwind CSS。

//CSS
@import "tailwindcss";

  • 开始构建过程s

使用 npm run dev 或在你的 package.json 文件中配置的任何命令运行你的构建过程。

//Terminal
npm run dev

  • 开始在 HTML 中使用 Tailwind

确保编译后的 CSS 包含在 <head> （你的框架可能会为你处理此问题） 中，然后开始使用 Tailwind 的工具类来设置内容样式。

//HTML
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/src/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

linux灯控、指示灯改变改色探寻及教程