Estoy tratando de usar Tailwind para mi proyecto, pero estoy usando ExpressJS y EJS como motor de vista, pero no funciona, ¿alguna guía?
Mi archivo app.js
require("dotenv").config(); const express = require("express"); const ejs = require("express"); const bodyParser = require("body-parser"); const port = 3000; const dotenv = require("dotenv"); const app = express(); app.use(bodyParser.urlencoded({ extended: true })); app.set("view engine", "ejs"); app.use(express.static(__dirname + "src")); app.get("/", (req, res) => { res.render("homepage"); }); app.listen(port, (req, res) => { console.log("Server running"); });Mi archivo homepage.ejs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="/dist/output.css" rel="stylesheet" /> <title>Document</title> </head> <body> <h1 class="text-3xl font-bold underline">Hello world!</h1> </body> </html>El servidor se está ejecutando correctamente
Comando utilizado para generar el archivo de viento de cola
npx tailwindcss -i ./src/style.css -o ./dist/output.css --watchEstructura de mi proyecto:
Project/ -- node_modules -- src/ -- index.html -- style.css -- views/ -- homepage.ejsconfiguración de tailwind.config.js
module.exports = { content: [ "./src/*.{html,js,css} ", "./views/homepage.ejs", ], theme: { extend: {}, }, plugins: [ { tailwindcss: {}, autoprefixer: {}, }, ], };Creo que esto no funciona porque no expuso la carpeta dist en su aplicación Express.
De hecho, expone la carpeta src pero no la carpeta dist que contiene sus estilos.
Además, ¡expuso la carpeta src pero no las vistas! Creo que su aplicación Express le muestra la página index.html de la carpeta src en lugar de mostrar el EJS.
Basado en este repositorio de demostración con Pug , le sugiero que haga estos cambios en su punto de entrada Express.
require("dotenv").config(); const express = require("express"); const ejs = require("express"); const bodyParser = require("body-parser"); const port = 3000; const dotenv = require("dotenv"); const app = express(); const path = require("path"); app.use(bodyParser.urlencoded({ extended: true })); // => Here we expose the views so it can be rendered. app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); // => Here we expose your dist folder app.use(express.static(path.join(__dirname, 'dist'))) app.get("/", (req, res) => { res.render("homepage"); }); app.listen(port, (req, res) => { console.log("Server running"); }); y luego vincule el CSS en su vista, con <link href="/output.css" rel="stylesheet" />
Además, si desea agregar más vistas en el futuro, le sugiero que agregue un comodín para que tome todos los archivos .ejs en la carpeta de vistas.
module.exports = { content: [ "./src/*.{html,js,css}", "./views/*.ejs", ], theme: { extend: {}, }, plugins: [ { tailwindcss: {}, autoprefixer: {}, }, ], }; Puede ver un artículo más detallado aquí, https://daily.dev/blog/how-to-use-tailwindcss-with-node-js-express-and-pug . Es para Pug, pero solo necesita reemplazar cada pug por ejs y listo.
Espero eso ayude !