-1

我正在尝试学习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">
4

1 回答 1

0

阿萨拉穆阿莱库姆。谢谢你的问题。当您开始使用顺风时，我建议您先使用 CDN。在安装中，您将找到仅复制的播放 CDN

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

并粘贴到 HTML 的 head 部分。之后，所有顺风 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，然后顺风实用程序类将正常工作。

谢谢你

于 2021-12-28T11:02:15.963 回答