使用tailwindCss vs3.0问题答案

【问题标题】：Using tailwindCss vs3.0 issue使用tailwindCss vs3.0问题
【发布时间】：2022-01-19 22:58:20
【问题描述】：

我正在尝试学习tailwindCss，但文档显示的是最新版本

    https://tailwindcss.com/docs/installation

我遵循它来设置我的第一个项目，但这里的问题是当我将实用程序类应用于我的项目时它不起作用。这是我的代码

    <body>
     <h1 class="text-lime-400">Hello World of Joy </h1>
     <hr>
    </body>

这里是tailwindcss生成样式的链接

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

【问题讨论】：

标签： tailwind-css tailwind-ui

【解决方案1】：

Assalamu'Alaikum。谢谢你的问题。当您开始使用顺风时，我建议您先使用 CDN。在安装中，您将找到 播放 CDN，您将只在其中复制

<script src="https://cdn.tailwindcss.com"></script>

并粘贴到 HTML 的 head 部分。之后所有的tailwind css代码都会运行。

但是如果你想通过安装来使用它，那么我想你有一个 package.json 文件。你应该在哪里编写一个脚本来构建你的 CSS。你需要构建css。如果您更改 tailwind.config.js 中的任何内容，则需要再次重建 css 以影响更改的变体。

{
  "name": "dims-web-1.1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build-css": "tailwindcss build src/style.css -o public/styles.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "tailwindcss": "^2.2.19"
  }
}

脚本中的“build-css”是我构建 css 的自定义代码。构建CSS。在终端你需要写

npm run build-css

然后点击enter 以在您的 public.css 中获取您的 css 然后顺风实用程序类将正常工作。

谢谢

【讨论】：