如何在你的项目中导入Tailwind CSS本文介绍了两种集成Tailwind CSS的方法： Vite方式安装tai

使用Vite

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

此处依赖管理

"@vitejs/plugin-vue": "^5.0.0",
"vite": "^5.2.0",

安装 Tailwind CSS

tailwindcss通过@tailwindcss/vitenpm安装。

npm install tailwindcss @tailwindcss/vite

配置 Vite 插件

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

import { defineConfig } from 'vite'

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({

    plugins: [

    tailwindcss(),

    ],

})

导入 Tailwind CSS

向您的 CSS 文件添加一个@import导入 Tailwind CSS 的内容。

@import "tailwindcss";

main导入

import { createApp } from "vue";
import "./style.css";
import router from "./router";
import App from "./App.vue";

const app = createApp(App);
app.use(router);
// 挂载应用
app.mount("#app");

开始构建过程

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

开始在 Vue 中使用 Tailwind

<template>
  <div class="bg-blue-500 text-white p-4">
    Tailwind 测试
  </div>
</template>

使用 PostCss

将 Tailwind CSS 安装为 PostCSS 插件是将其与 Next.js 和 Angular 等框架集成的最无缝方式。

安装 Tailwind CSS

通过 npm安装tailwindcss、@tailwindcss/postcss和postcss

npm install tailwindcss @tailwindcss/postcss postcss

将 Tailwind 添加到你的 PostCSS 配置中

添加@tailwindcss/postcss到您的postcss.config.mjs文件，或添加到您的项目中配置 PostCSS 的任何位置。

export default {

    plugins: {

    "@tailwindcss/postcss": {},

    }

}

导入 Tailwind CSS

向您的 CSS 文件添加一个@import导入 Tailwind CSS 的内容。

@import "tailwindcss";

开始构建过程

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

开始在 HTML 中使用 Tailwind

确保你的编译 CSS 包含在<head>中，然后开始使用 Tailwind 的实用程序类来设置你的内容样式。

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="/dist/styles.css" rel="stylesheet">

    </head>

    <body>

        <h1 class="text-3xl font-bold underline">

            Hello world!

        </h1>

    </body>

</html>