Стили с ветром не применяются в приложении Express и EJS ⇐ CSS

[Anonymous]

Я использую Express и EJS View Engine в своем проекте, и я хочу реализовать CSS Tailwind в моем коде для лучшего стиля, но стили с ветром либо не применяются полностью, либо не все стили CSS применяются. Это моя структура папок < /p>

Код: Выделить всё

-- 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
});
});
< /code>
Это mayout.ejs code < /p>



















< /code>
cailwind.config.js код файла < /p>
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./views/**/*.ejs"],
theme: {
extend: {},
},
plugins: [],
};

< /code>
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

и представления/index.ejs код файла


Address
11111111111

Digital Marketing Specialist


Name

< /code>
Я сначала попробовал метод сборки, описанный на веб -сайте Tailwind, где мы должны запустить команду сборки < /p>
npx tailwindcss -i ./public/css/style.css -o ./public/css/output.css --watch
< /code>
Но с помощью этого лишь немногие стили применяются, как применяется Bg-black, но Bg-[#f3f5f8] не применяется или какой-либо пользовательский цвет Bg. Также применяются применение и накладные, и набережные также не применяются. Упоминается выше, но это все еще не работало. P> Сначала я попробовал метод сборки, описанный на веб -сайте Tailwind, где мы должны запустить команду сборки < /p>
npx tailwindcss -i ./public/css/style.css -o ./public/css/output.css --watch
< /code>
Но с помощью этого лишь немногие стили применяются, как применяется Bg-black, но Bg-[#f3f5f8] не применяется или какой-либо пользовательский цвет Bg. Также применяются применение и накладные, и набережные также не применяются. Указано выше, но это все еще не работало.>

Подробнее здесь: https://stackoverflow.com/questions/782 ... nd-ejs-app