使用 tailwindCss vs3.0 问题

Question

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

    https://tailwindcss.com/docs/installation

我按照它设置了我的第一个项目，但这里的问题是当我将实用程序 class 应用到我的项目时它不起作用。这是我的代码

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

这里是 link 由 tailwindcss

生成的样式

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

Answer 1

Assalamu'Alaikum。谢谢你的问题。当您开始使用 tailwind 时，我建议您首先使用 CDN。在安装中你会发现 Play CDN 你将只复制

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

并粘贴到 HTML 的头部部分。在那之后所有顺风 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 将你的 css 放入你的 public.css 然后 tailwind 实用程序类将正常工作。

谢谢

使用 tailwindCss vs3.0 问题

Using tailwindCss vs3.0 issue

tailwind-css

tailwind-ui