如何在Node Js和EJS模板中使用Tailwind CSS

epggiuax 于 2023-06-05 发布在 Node.js

关注(0)|答案(2)|浏览(218)

我试图使用tailwindcss与nodejs和ejs模板，但它不工作（添加tailwindcss类的tages没有反映），每当我试图构建和观看我的tailwindcss它说警告-没有实用程序类被检测到在您的源文件，
App.js

const express = require("express");
let ejs = require('ejs');
const app = express();
const path = require("path")

app.use(express.static(path.join(__dirname, "public")));
app.use(express.static(path.join(__dirname, "css")));
app.set("views", path.join(__dirname, "views"));
app.set("view engine", 'ejs');

app.get("/", (req, res)=> {

  res.render("index");

})


app.listen(3000, function(){
  console.log("Server is running on port 3000")
})

tailwind.config.js

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

index.ejs

<%- include('partials/header.ejs'); %>
<h1 class="text-1xl">Hello World</h1>
<%- include('partials/footer.ejs') %>

附加图像是文件夹结构

node.js

来源：https://stackoverflow.com/questions/74336652/how-to-use-tailwind-css-with-node-js-and-ejs-template

2条答案

按热度按时间

7nbnzgx91#

错误似乎出现在tailwind.config.js文件中。“ejs”的格式不正确。

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

赞(0）回复(0）举报 2023-06-05

ar5n3qh52#

您必须将content: ["./views/*.ejs"]修改为content: ["./views/**/*.{ejs}"]，因为您的项目目录结构清楚地表明您的views文件夹中有一个子文件夹，并且该子文件夹中包含ejs文件。

赞(0）回复(0）举报 2023-06-05