我在我的项目中使用express和ejs视图引擎，我想在我的代码中实现tailwind css以获得更好的样式，但是tailwind样式要么没有完全应用，要么不是所有的tailwind css样式都应用。这是我的文件夹结构
-- api /
----- index.js
-- node_modules
-- public/
----- images
----- css/
-------- style.css
-------- output.css
-- views/
----- layouts/
-------- layout.ejs
----- partials/
-------- header.ejs
-------- footer.ejs
----- index.ejs
-- postcss.config.js
-- tailwind.config.js
-- vercel.json
这是我的 api/index.js 代码
const express = require("express");
const expressLayouts = require("express-ejs-layouts");
const { formValidationSchema } = require("../schemas/formvalidation");
const app = express();
const multer = require("multer");
const PORT = process.env.PORT || 3000;
require("dotenv").config();
app.use(express.static(__dirname + "/../public"));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.set("views", __dirname + "/../views");
app.use(expressLayouts);
app.set("layout", __dirname + "/../views/layouts/layout.ejs");
app.set("view engine", "ejs");
;
app.get("/", async function (req, res) {
res.render("index", {
title: "Welcome to my portfolio!",
// Other data
});
});
这是layout.ejs代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title>
<link rel="stylesheet" type="text/css" href="/css/output.css" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<header><%- include('../partials/header') %></header>
<main><%- body %></main>
<footer><%- include('../partials/footer') %></footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
tailwind.config.js 文件代码
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./views/**/*.ejs"],
theme: {
extend: {},
},
plugins: [],
};
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
和views/index.ejs文件代码
<div class="mt-20 flex flex-col justify-center items-center bg-pink-400">
<div class="!bg-[#f3f5f8] flex justify-between !w-[90vw] py-2 px-2">
<div class="">Address</div>
<div>11111111111</div>
</div>
<h1 class="text-purple-300">Digital Marketing Specialist</h1>
<img src="/images/zee.png">
<p>Name</p>
</div>
我首先尝试了 tailwind 网站上描述的构建方法，我们必须运行构建命令
npx tailwindcss -i ./public/css/style.css -o ./public/css/output.css --watch
但是只有少数样式被应用，例如 bg-black 正在应用，但 bg-[#f3f5f8] 没有应用或任何自定义 bg 颜色。子 div 上的 w-full 也正在应用，而 padding 也不适用。 然后我决定使用 post css 方式也在 tailwind 上提到，所以我安装了 post css 和 autoprefixer 并使用上面提到的代码制作了 postcss.config.js 文件，但它仍然不起作用。
我希望基本上能够像我们在 React 或使用 Tailwind 的下一个 JS Web 应用程序中那样正确设置样式
我首先尝试了 tailwind 网站上描述的构建方法，我们必须运行构建命令
npx tailwindcss -i ./public/css/style.css -o ./public/css/output.css --watch
但是只有少数样式被应用，例如 bg-black 正在应用，但 bg-[#f3f5f8] 没有应用或任何自定义 bg 颜色。子 div 上的 w-full 也正在应用，而 padding 也不适用。 然后我决定使用 post css 方式也在 tailwind 上提到，所以我安装了 post css 和 autoprefixer 并使用上面提到的代码制作了 postcss.config.js 文件，但它仍然不起作用。
我希望基本上能够像我们在 React 或使用 Tailwind 的下一个 JS Web 应用程序中那样正确设置样式
你的问题解决了吗？？