Tailwind CSS 未找到实用程序类

Question

正在尝试通过 CLI 指令让 Tailwind 工作 here。我有一个（简化的）文件结构

-public 
  -stylesheets
    -styles.css
    -tailwind.css
-views
  -index
    -index.pug
    -page2.pug
    -page3.pug
  -user
    -index.pug
    -page2.pug
  -includes
    -templates
      -header.pug
      -footer.pug

我已经按照安装文档和 YouTube 上的视频尝试让它工作，但是当我设置 tailwind.config.js 时：

module.exports = {
  content: [
    '/views/**/*.pug'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

并尝试在 index/index.pug 上使用 Tailwind 类进行简单测试，如下所示：

extends ../index/layout

block content

  h1.text-3xl
    | Hello world!

和运行npx tailwindcss -i ./public/stylesheets/tailwind.css -o ./public/stylesheets/styles.css --watch

我刚刚在前端收到一个完全未格式化的 H1 和 warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration. 的终端警告。我做错了什么？

Answer 1

在您的 Tailwind 配置文件中，您的模板路径列为 '/views/**/*.pug'。

指定的路径从文件系统的根目录开始，而不是相对于您运行命令所在的文件夹。

将路径更新为 './views/**/*.pug'

Tailwind CSS 未找到实用程序类

Tailwind CSS No Utility Classes Were Found

css

tailwind-css

Tailwind CSS 未找到实用程序 类

Tailwind CSS No Utility Classes Were Found

css

tailwind-css

Tailwind CSS 未找到实用程序类