带有 Pug 的 ExpressJS - 未应用 Tailwind 属性答案

【问题标题】：ExpressJS with Pug - Tailwind properties not being applied带有 Pug 的 ExpressJS - 未应用 Tailwind 属性
【发布时间】：2022-06-26 03:26:33
【问题描述】：

我使用 Express/Node 和 Pug 作为视图模板。尝试使用 Tailwind 进行样式设置，但无法让 Tailwind 根据 Pug 文件中添加的类名修改我的 CSS。有没有人遇到过这种情况？

这是我尝试修改“测试顺风”的显示方式的 Pug 文件。但是，它会加载黑色纯文本。

我能够使用顺风样板基础、组件和实用程序填充我的 style.css 文件。如果我在 styles.css 中设置类名的样式，它可以工作，所以文件链接正确......

【问题讨论】：

标签： express pug tailwind-css

【解决方案1】：

很可能 Tailwind 没有渲染。在this article 和this video 中显示如何操作。

你必须安装tailwindcss postcss autoprefixer postcss-cli

npm install tailwindcss postcss autoprefixer postcss-cli

创建 postcss.config.js

module.exports =
{
    plugins:
    {
        tailwindcss: {},
        autoprefixer: {},
    },
}

和tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports =
{
    content:
    [
        './views/*.{pug, html}',
    ],
    theme:
    {
        extend:
        {

        },
    },
    plugins:
    [

    ],
}

和public/styles/tailwind.css里面的css文件

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

到 package.json 添加脚本

"tailwind:build": "postcss public/styles/tailwind.css -o public/styles/style.css",

现在您可以为您的 pug 模板或其他一些 html 文件构建顺风。只需运行npm run tailwind:build 并打开您的主机

但是为了不要一次又一次地运行这个脚本，你可以用这个脚本监视文件

"tailwind:watch": "postcss public/styles/tailwind.css -w -o public/styles/style.css"

只需运行npm run tailwind:watch，您的 css 文件就会在更改 tailwind.css 文件时更新

【讨论】：