导入大部分 Tailwind css 类的最简单方法是什么？

问题描述 投票：0回答：1

我正在构建一个使用 Tailwind css 来设置样式的网站构建器，但我遇到了一个问题，我向组件添加了一个类，但样式没有任何变化。来发现，这是因为该样式类尚未生成，因为它不是我的项目的一部分。我想看看是否有办法导入所有类，但我找不到任何东西。我能找到的最接近的东西是使用 

safelist
中的 
tailwind.config.js
选项，但我遇到了困难。首先，我必须手动尝试添加类。其次，我遇到了本地主机网页甚至无法加载的问题。第三，每次我更新代码时，页面加载都需要很长时间。

有什么建议吗？其他人已经构建了使用 Tailwind CSS 库的应用程序，所以我知道有一种方法可以做到这一点。

javascript html css tailwind-css
1个回答
0
投票

将大部分 Tailwind CSS 类导入项目的最简单方法是使用 完整 Tailwind CSS 构建，其中包括其所有实用程序。以下是有效包含 Tailwind CSS 的步骤：

1。使用 Tailwind CDN（最简单的方法）

这种方法使您无需安装或配置任何东西即可快速入门。但是，它包含所有 Tailwind CSS 类，这可能会导致文件大小更大。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS</title>
  <!-- Tailwind CSS via CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-center">
  <h1 class="text-4xl text-blue-500">Hello Tailwind!</h1>
</body>
</html>

优点：

  • 无需设置或安装。
  • 非常适合快速原型制作。

缺点：

  • 包含所有 Tailwind 类，从而导致 CSS 文件更大。
  • 可定制性有限。

2。通过 NPM 安装（适用于生产项目）

对于大多数项目，使用 Tailwind CLI 或将其与PostCSS、Vite 或 Webpack 等构建工具集成，可确保更好地控制包含哪些类。这种方法允许您使用所有 Tailwind 实用程序，同时优化最终的 CSS 输出。

步骤：

  1. 安装 Tailwind CSS:

    npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

  2. 配置

    tailwind.config.js
    ： 确保 
    content
    数组指定使用 Tailwind 类的文件。这可确保在生产版本中清除未使用的样式：

    module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

  3. 创建 Tailwind CSS 文件： 创建一个 CSS 文件（例如，

    styles.css
    ）并包含以下内容：

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

  4. 构建 Tailwind CSS： 使用 CLI 生成完整的 CSS 文件：

    npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watch

  5. 包含在您的项目中： 将输出 CSS 文件添加到您的 HTML 中：

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

优点：

  • 完全可定制（扩展主题、添加插件等）。
  • 较小的生产版本，未使用的样式已被清除。
  • 与 React、Vue 和 Next.js 等框架配合良好。

3.使用 Tailwind Play（在线编辑器）

要快速测试或探索 Tailwind 课程，请使用 Tailwind Play。该在线编辑器包含所有开箱即用的 Tailwind 类，无需设置。

何时选择每种方法

用例 方法
快速原型制作 顺风CDN
完全可定制和生产 NPM + 构建工具
使用 Tailwind 进行实验 顺风游戏

对于大多数生产项目，建议使用NPM安装方法，因为它具有可扩展性、可定制性和优化的CSS输出。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.