Tailwindcss not rendering in ExpressJS/React app-CodePudding

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

> [email protected] 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 >

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;

CodePudding user response：

Have you added the following in the index.css file

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

CodePudding user response：

Try with this this.

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!

CodePudding user response：

The problem lies on the /build folder and your tailwind.config.js file not reading the files it's supposed to read.

You're supposed to watch for any class used in your /build folder files, especially any html/pug file.

Also tailwind is not told to watch the /public folder, that is why the underline style was not showing up.

Try this tailwind.config.js file.

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

If you want Tailwind to watch /public too, just add "./public/**/*.{js,jsx,ts,tsx,pug,html}" on the content array. Not recommended though.