Rückenwindstile, die sich nicht richtig in Express- und EJS -App anwenden ⇐ CSS

[Guest]

Ich verwende Express- und EJS View -Engine in meinem Projekt und möchte das Rückenwind -CSS in meinem Code für ein besseres Styling implementieren. Dies ist meine Ordnerstruktur < /p>

Code: Select all

-- 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

Dies ist mein api/index.js code

Code: Select all

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>
Dies ist layout.ejs Code < /p>



















< /code>
-Tailwind.config.js Dateicode < /p>
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./views/**/*.ejs"],
theme: {
extend: {},
},
plugins: [],
};

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

und Ansichten/index.ejs Dateicode


Address
11111111111

Digital Marketing Specialist


Name

< /code>
Ich habe zuerst die auf der Tailwind -Website beschriebene Build -Methode ausprobiert, auf der wir einen Build -Befehl ausführen müssen < /p>
npx tailwindcss -i ./public/css/style.css -o ./public/css/output.css --watch
< /code>
Aber mit diesen wenigen Stilen werden nur wenige Stile angewendet, wie BG-Black angewendet wird, aber BG-[#f3f5f8] gilt nicht oder eine benutzerdefinierte BG-Farbe. Außerdem bewerben sich W-Full-Full-Full Erwähnen Sie oben, aber es hat immer noch nicht funktioniert. P> Ich habe zuerst die auf der Tailwind -Website beschriebene Build -Methode ausprobiert, auf der wir einen Build -Befehl < /p>
ausführen müssennpx tailwindcss -i ./public/css/style.css -o ./public/css/output.css --watch
< /code>
Aber mit diesen wenigen Stilen werden nur wenige Stile angewendet, wie BG-Black angewendet wird, aber BG-[#f3f5f8] gilt nicht oder eine benutzerdefinierte BG-Farbe. Außerdem bewerben sich W-Full-Full-Full oben erwähnen, aber es hat immer noch nicht funktioniert.>