Certain parts of tailwind CSS not working in production

Question

I've built a static website for my next JS app that uses tailwind CSS for styling. I'm using statically as a CDN. The website in the development server(local host) works perfectly alright. However, in production, certain parts of styling seem to be broken (Header, Footer, and toggling between dark/light mode to be precise). Attaching screenshots for reference.
Local server:

Production:

When I inspect the corresponding elements in local and production env, there seems to be no difference in the HTML structure and class names, but when I hover over the broken elements (nav items in this case) in production, the corresponding elements are not being highlighted. So far this is what I was able to find. Below are few config files:
next.config.js:

const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  reactStrictMode: true,
  
  images: {
    // domains: ['raw.githubusercontent.com','ibb.co'],
    domains: ['raw.githubusercontent.com'],
    loader:'imgix',
    path:''
  },
  assetPrefix: isProd ? 'CDN_LINK_HERE' : '',
}

tailwind.config.css :

module.exports = {
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

How do I go about fixing this? Thanks.

grenzbotin · Accepted Answer · 2021-10-23T13:05:25.353

3

Ensure to add a complete list of paths you need your CSS applied to in the purge array of tailwind.config.css.

module.exports = {
// ▼ here you need to add all paths according to your needs
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './your-other-component-folder/**/*.{js,ts,jsx,tsx}'], 
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

edited Oct 23 '21 at 13:05

answered Oct 23 '21 at 06:51

grenzbotin

2,489
1
12
14

Hello, thanks for the answer. I was able to fix the issue using `imgix` and setting the path to `''` . The export was successful, but a few parts of CSS seem to be broken in production, (I'm using Tailwind CSS), any idea what's wrong? I'm using statically for CDN. – Prajwal Kulkarni Oct 23 '21 at 07:13
Tough to say without seeing any setup or results. What is failing exactly since only a few parts seem to be broken? How are these sources referenced? If you are inspecting the code, do the failing parts point to the right destination? – grenzbotin Oct 23 '21 at 07:28
I've updated the question and attached the required files/screenshots, could you please look through it? – Prajwal Kulkarni Oct 23 '21 at 07:53
For me it looks like path problem. If you inspect the production website via dev console. How are the needed CSS files referenced? So they should use the assetPrefix you defined in you `next.config.js`- If you try to open the related file, is it actually existing? – grenzbotin Oct 23 '21 at 08:03
Yes, the referenced files are hosted on `statically` and are visible in the sources tab of the dev console. As I said, the problem persists only to certain components (header, footer, and toggling between dark/light mode), other animations and styling in other components are working correctly. – Prajwal Kulkarni Oct 23 '21 at 08:10
any updates or any idea what's the cause of this issue? – Prajwal Kulkarni Oct 23 '21 at 09:00
1

Hm. Is your purge array in `tailwind.config.css` referencing the folders your header, footer and toggeling are located in? For debugging, you could as well try to be more concrete: `purge: ['./pages/**/*.js', './components/**/*.js'],` (in case you are using .js files for your components) – grenzbotin Oct 23 '21 at 09:27
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/238456/discussion-between-prajwal-kulkarni-and-grenzbotin). – Prajwal Kulkarni Oct 23 '21 at 10:09
Thanks a lot. Works just as expected. And just out of curiosity, may I know how does this impacts at production level? I mean prior to deploying it to production, I hadn't added all the paths, but still, it did work as normal. It was only at production, that this issue arose. – Prajwal Kulkarni Oct 23 '21 at 16:19
1

Likely it worked, because you did not create a `production build` before but worked in a dev environment. In the moment you are building for production you have the aim to minify your bundle size as much as possible. This is what package bundlers (e.g. webpack) are doing, and where tailwind is hooking in based on the configuration you supplied. Might be that you would not have had this issue if you would have specified `purge: false`, because then it would be skipped = no optimization. [A guess, I never used tailwind =)] How it works: https://tailwindcss.com/docs/optimizing-for-production – grenzbotin Oct 23 '21 at 17:17
I made a typo in the tailwind config hahaah ‍♂️ Thank you :) – jawkhan Sep 23 '22 at 12:27

Certain parts of tailwind CSS not working in production

1 Answers1