Tailwindcss not rendering in ExpressJS/React app

I am trying to add TailwindCSS to my existing Express JS + React application. I have tried many different tutorials, such as this one https://tailwindcss.com/docs/installation for regular JS, and this one made specifically for Create-React-App https://tailwindcss.com/docs/guides/create-react-app . I later tried this tutorial for express js https://daily.dev/blog/how-to-use-tailwindcss-with-node-js-express-and-pug My project was initially made with Create-React-App, but I later changed everything to run in Express JS. So I need to build it first before I see any changes. I’ve done that every single time I try something different. I’ve even run the tailwind specific build command every time to see if that does anything but so far nothing. It seems like it doesn’t even render on my plain html page, nevermind my react side.

Here is my project for reference https://github.com/twbluenaxela/LVChineseBusinessCrawler/pull/35

Here is my scripts for package json

"scripts": {
"predeploy": "npm install",
"dev": "react-scripts --openssl-legacy-provider start",
"clientbuild": "npm install && node server/index.js",
"test": "react-scripts test",
"build": "react-scripts --openssl-legacy-provider build",
"build:css": "postcss src/index.css -o dist/output.css",
"eject": "react-scripts eject",
"start_cors": "node cors.js",
"start": "node server/index.js" }

Here’s my post css config js

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
}

Here’s my tailwind config

module.exports = {
    content: [
      "./src/**/*.{js,jsx,ts,tsx}",
      "./build/**/*.html"
    ],
    theme: {
      extend: {},
    },
    plugins: [
      {
        tailwindcss: {},
        autoprefixer: {},
      },
    ],
  };

Here’s my link to my dist folder in my index html (location: public/index.html)

    <link href="/dist/output.css" rel="stylesheet">

Here’s my express side. I think it possibly may have to deal with express first loading these ‘chunk’ files generated by running the ‘react-scripts build’ script and then defaulting to that rather than tailwind?

// Have Node serve the files for our built React app
app.use(express.static(path.resolve(__dirname, '../build')));
//this is for tailwind.
app.use(express.static(path.join(__dirname, 'dist')));


// Stop browser from sending requests to get the icon
app.get('../build/favicon.ico', (req, res) => res.status(204).end());

// All other GET requests not handled before will return our React app
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../build/index.html'));
});

// Start the server and listen on the preconfigured port
app.listen(port, () => console.log(`App started on port ${port}.`));

Here’s the log I get from the server when I reload the page

gitpod /workspace/LVChineseBusinessCrawler (NodemonFix) $ npm run start

> pachong@0.1.0 start
> node server/index.js

App started on port 3001.
GET / 200 3.406 ms - 2371
GET /dist/output.css 200 1.897 ms - 2371
GET /static/css/main.a6b1053c.chunk.css 200 0.556 ms - 108
GET /static/js/2.b2955d3e.chunk.js 200 0.561 ms - 188544
GET /static/js/main.bfafc08b.chunk.js 200 0.453 ms - 2862
GET /static/css/main.a6b1053c.chunk.css.map 200 0.609 ms - 227
GET /favicon.ico 200 0.719 ms - 3870
GET /manifest.json 200 0.401 ms - 319

As you can see it does seem like it knows where my output.css is and I’m assuming it loads it? So maybe its’ the chunk css overwriting it? So I tested it on my index html in my public folder by changing the h1 heading to this line

    <h1 class="text-3xl font-bold underline">

And it just shows regular h1 without any underline or anything. Is there something I’m not seeing here? I would realllyyy appreciate any help I could get!!

edit1: Here’s my index.css as well

@tailwind base;
@tailwind components;
@tailwind utilities;

Answer

Try with this link.

It has the detailed possible explanation of setting up tailwind for react

Follow all the steps carefully. And make sure it is working fine and then add the express module

Hope it helps!

Advertisement

Answer