4 年内掌握 Tailwind CSS 与流行 JavaScript 框架的集成

您准备好增强您的 web 开发工作流程了吗？别再犹豫了！在这份综合指南中，我们将引导您完成将 tailwind css 与四个最热门的 javascript 框架无缝集成的过程：react、angular、next.js 和 nuxt.js。无论您是经验丰富的专业人士还是刚刚起步，本教程都将帮助您立即创建令人惊叹的响应式 web 界面。

为什么选择 tailwind css？

在深入讨论之前，我们先来谈谈为什么 tailwind css 已成为全球开发者的首选。这个实用程序优先的 css 框架允许您构建现代、时尚的界面，而无需离开 html。它快速、灵活，非常适合创建自定义设计，无需编写自定义 css 的麻烦。

react with vite：闪电般的快速开发

让我们从 react 开始，搭配超快的 vite 构建工具。以下是如何在 react 项目中启动并运行 tailwind css：

第 1 步：设置您的 tailwind css 环境

首先，让我们安装必要的软件包：

npm install -d tailwindcss postcss autoprefixer
npx tailwindcss init -p

此命令将创建 tailwind.config.js 和 postcss.config.js 文件，为 tailwind 魔法奠定基础。

立即学习“Java免费学习笔记（深入）”；

第 2 步：配置您的 tailwind 设置

打开新创建的 tailwind.config.js 文件并添加以下内容：

/** @type {import('tailwindcss').config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

此配置告诉 tailwind 在哪里查找您的 html 和 javascript 文件。

第 3 步：整合 tailwind 指令

用这些 tailwind 指令替换 src/index.css 文件的内容：

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

就这样，您就可以开始在 react 组件中使用 tailwind 了！

angular：强大且灵活

接下来，让我们使用来自 google 的强大框架 angular 设置 tailwind css。

第 1 步：安装并初始化

在终端中运行这些命令：

npm install -d tailwindcss postcss autoprefixer
npx tailwindcss init -p

第 2 步：为 angular 配置 tailwind

更新你的 tailwind.config.js 文件：

/** @type {import('tailwindcss').config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

第 3 步：更新您的全局样式

打开全局样式文件（通常是 styles.css）并添加这些 tailwind 指令：

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

现在您已经准备好在 angular 模板中使用 tailwind 类了！

next.js：react 生产框架

next.js 已成为 react 开发人员的最爱。以下是如何将 tailwind css 与这个强大的框架集成：

第 1 步：设置顺风

首先安装必要的软件包：

npm install -d tailwindcss postcss autoprefixer
npx tailwindcss init -p

第 2 步：为 next.js 配置 tailwind

更新你的 tailwind.config.js 文件：

/** @type {import('tailwindcss').config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

第 3 步：将 tailwind 添加到您的全局 css

在您的全局 css 文件（通常是 globals.css）中，添加这些 tailwind 指令：

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

您现在可以在 next.js 项目中使用 tailwind 了！

nuxt.js：直观的 vue 框架

最后但并非最不重要的一点是，让我们使用备受喜爱的 vue.js 框架 nuxt.js 设置 tailwind css。

第 1 步：安装依赖项

运行这些命令：

npm install -d tailwindcss postcss autoprefixer
npx tailwindcss init -p

第2步：配置nuxt.js

更新您的 nuxt.config.js 文件：

export default definenuxtconfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

第 3 步：设置 tailwind 配置

在 tailwind.config.js 文件中，添加：

/** @type {import('tailwindcss').config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

第 4 步：创建主 css 文件

在 ./assets/css/main.css 创建一个新文件并添加：

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

第5步：更新nuxt.config.js

将新创建的 main.css 添加到 nuxt.config.js 中的 css 数组中。

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

这就是你拥有的！ tailwind css 现已与您的 nuxt.js 项目集成。

总结：拥抱 tailwind css 的力量

恭喜！您刚刚学习了如何将 tailwind css 与四个最流行的 javascript 框架集成。通过利用实用程序优先 css 的强大功能，您现在可以比以往更高效地构建令人惊叹的响应式 web 应用程序。

请记住，网络开发的世界总是在不断发展。保持好奇心，不断尝试，并毫不犹豫地深入研究 tailwind 的文档以获取更先进的技术。

您是否尝试过将 tailwind css 与您最喜欢的框架集成？您面临哪些挑战？在下面的评论中分享您的经验 - 让我们互相学习，作为一个社区共同成长！

祝您编码愉快，祝您由 tailwind 支持的项目既美观又实用！