Tailwindcss not rendering in ExpressJS/React app

Question

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 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;

krishnaacharyaa · Accepted Answer · 2022-06-18 09:25:53Z

1

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!

edited Jun 18, 2022 at 9:25

answered Jun 17, 2022 at 7:58

krishnaacharyaa

26.1k9 gold badges102 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bluenaxela Over a year ago

Thank you so much! This fixed it. So the issue was that, in my index.js I was importing the initial index.css file which only included the tailwind directives. Then I tried importing my generated tailwind css file (located at dist/output.css) and it didnt work. However when I put my generated dist folder into my src folder, then imported that file into my index.js, it started to work. Thank you!

krishnaacharyaa Over a year ago

I'm happy to hear that, as you are a new user , if you appreciate any of the below answers make sure you up vote and the answer which worked , mark it as tick . Which will help others to quickly find the useful answer

bluenaxela Over a year ago

I can't upvote yet but I marked your answer with the green checkmark. Thanks again!

Zombie Chibi XD · Accepted Answer · 2022-06-17 09:34:57Z

1

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.

answered Jun 17, 2022 at 9:34

Zombie Chibi XD

3863 silver badges20 bronze badges

1 Comment

bluenaxela Over a year ago

Hey thanks for taking the time to reply!! So here's what I did. I changed my tailwind.config.js file to include what you have up there. Then I ran npm install, npm ci, npm run build:css (executes this line: postcss src/index.css -o dist/output.css), then I ran npm run build, and finally npm start. Still nothing has changed... I even tried linking the public folder by adding "./public/**/*.{js,jsx,ts,tsx,pug,html}" but it doesnt seem to have helped... is there another why i can debug it?

MagnusEffect · Accepted Answer · 2022-06-16 22:18:51Z

0

Have you added the following in the index.css file

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

answered Jun 16, 2022 at 22:18

MagnusEffect

3,9954 gold badges28 silver badges63 bronze badges

3 Comments

bluenaxela Over a year ago

Hi there! Yes I have 😁

MagnusEffect Over a year ago

Try to restart the server

bluenaxela Over a year ago

Hey thanks for replying, I have run npm run build, npm ci, and then npm start in that order everytime I tried something different.

Collectives™ on Stack Overflow

Tailwindcss not rendering in ExpressJS/React app

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related