I'm a full stack developer currently working with a Svelte single-page application and Express. However, I'm interested in using server-side rendering (SSR) with Express and EJS, but I've encountered difficulties with Tailwind CSS installation for EJS templates. While Bootstrap works seamlessly with EJS and traditional CSS is straightforward, the configuration for Tailwind seems overly complex, involving 7 to 8 steps. What approaches do you recommend for using EJS templates, and why?
4 Answers
I've known about EJS for years, and it's starting to feel outdated with newer frameworks like React and Vue taking over. For new projects, I'd recommend looking at these newer options. If you're stuck with an older project, consider using a CDN for Tailwind or setting up a custom build process for your styles. It might save you some hassle!
I think Tailwind can definitely work with EJS without too much hassle. In Tailwind version 4, the setup should be straightforward. Can you share a repository that shows the issues you're facing with Tailwind? It might help us troubleshoot together!
Thanks for getting back to me! There are quite a few steps needed to set up Tailwind in EJS templates. I found this article that explains the process: https://medium.com/@hannnirin/setting-up-express-mvc-ejs-tailwindcss-4-0-2ccac72dad59
My advice would be to just run Tailwind as a CLI build and direct the `content` to your EJS files. Serve the compiled CSS directly from Express, and you'll have it sorted. If that process feels overwhelming, don’t hesitate to use Bootstrap or plain CSS for your SSR with EJS setups. They are simpler alternatives!
Not sure why the command line interface didn't work for you. Usually, you just need to specify a source CSS file, and it generates an output CSS file. The article you linked does something similar by placing the output file in the 'public/' directory, which is typically accessed. EJS just needs to reference that output CSS file in your layout. Have you tried looking at the Tailwind CLI installation guide? As for your EJS files, just make sure they point to the compiled CSS in your public folder!
I did all those things you recommended! Tailwind is showing up in my npm list, and VSCode recognizes the classes I add. I ensured that I'm accessing the public/css/styles.css file, but it's still not working. I'll check out that article you sent though, thanks!
I thought about that too, but for Express SSR, you can't skip this setup. To avoid this process altogether, using a modern frontend framework sometimes feels easier. But I still like working with EJS, and I want to make it work for my setup!