Tailwind does not delete unused css

[HakanSungur]

What version of Tailwind CSS are you using?

v3.4.3

What build tool (or framework if it abstracts the build tool) are you using?

postcss: 8.4.38

What version of Node.js are you using?

14.21.3

What browser are you using?
Chrome

What operating system are you using?
Windows

Describe your issue

Tailwind does not delete unused css.

//index.jsx

**//index.jsx**
import { hydrate, render } from "react-dom";
import "./i18n.js";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import "rc-slider/assets/index.css";
import "./styles/index.scss";
import "./index.css";
import "./fonts/line-awesome-1.3.0/css/line-awesome.css";



//index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

//tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");

// Custom color with css variable color in __theme_color.scss
function customColors(cssVar) {
  return ({
    opacityVariable,
    opacityValue
  }) => {
    if (opacityValue !== undefined) {
      return `rgba(var(${cssVar}), ${opacityValue})`;
    }
    if (opacityVariable !== undefined) {
      return `rgba(var(${cssVar}), var(${opacityVariable}, 1))`;
    }
    return `rgb(var(${cssVar}))`;
  };
}

module.exports = {
  // content: [
  //   "./src/**/*.{js,jsx,ts,tsx,html}",
  // ],
  content: ["./src/**/*.js",
      "./src/**/*.js",
      "./src/**/*.jsx",
      "./src/**/*.ts",
      "./src/**/*.tsx",
      "./src/index.css",
      "./public/index.html",
      "./src/styles/__dates.scss",
      "./src/styles/__theme_colors.scss",
      "./src/styles/__theme_custom.scss",
      "./src/styles/__theme_font.scss",
      "./src/styles/__tw_safe_classes.scss",
      "./src/styles/_header.scss",
      "./src/styles/index.scss",
      "./fonts/line-awesome-1.3.0/css/line-awesome.css",
      "rc-slider/assets/index.css",
      "react-dates/lib/css/_datepicker.css"
    ],

  darkMode: "class",
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: "1rem",
        "2xl": "128px",
      },
    },
    fontFamily: {
      display: ["var(--font-display)", ...defaultTheme.fontFamily.sans],
      body: ["var(--font-body)", ...defaultTheme.fontFamily.sans],
    },
    colors: {
      transparent: "transparent",
      current: "currentColor",
      ...colors,
      primary: {
        50: customColors("--c-primary-50"),
        100: customColors("--c-primary-100"),
        200: customColors("--c-primary-200"),
        300: customColors("--c-primary-300"),
        400: customColors("--c-primary-400"),
        500: customColors("--c-primary-500"),
        6000: customColors("--c-primary-600"),
        700: customColors("--c-primary-700"),
        800: customColors("--c-primary-800"),
        900: customColors("--c-primary-900"),
      },
      secondary: {
        50: customColors("--c-secondary-50"),
        100: customColors("--c-secondary-100"),
        200: customColors("--c-secondary-200"),
        300: customColors("--c-secondary-300"),
        400: customColors("--c-secondary-400"),
        500: customColors("--c-secondary-500"),
        6000: customColors("--c-secondary-600"),
        700: customColors("--c-secondary-700"),
        800: customColors("--c-secondary-800"),
        900: customColors("--c-secondary-900"),
      },
      neutral: {
        50: customColors("--c-neutral-50"),
        100: customColors("--c-neutral-100"),
        200: customColors("--c-neutral-200"),
        300: customColors("--c-neutral-300"),
        400: customColors("--c-neutral-400"),
        500: customColors("--c-neutral-500"),
        6000: customColors("--c-neutral-600"),
        700: customColors("--c-neutral-700"),
        800: customColors("--c-neutral-800"),
        900: customColors("--c-neutral-900"),
      },
    },
  },

  variants: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/line-clamp"),
    require("@tailwindcss/aspect-ratio"),
  ],
};

//postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
  }),
  ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  ],
}

//.styles/index.scss

@import "./_tw_safe_classes";
@import "./_theme_colors";
@import "./_theme_font";
@import "./_theme_custom";
@import "./_dates";
@import "./header";
@import "node_modules/@glidejs/glide/src/assets/sass/glide.core";

[wongjn]

Could you provide a project that showcases the problem you are experiencing please?

[adamwathan]

Can you provide an actual reproduction that people can clone down and see the issue themselves? Knowing what I know about how the internals of Tailwind works it's not possible for bottom-3 to exist in your compiled CSS unless the string "bottom-3" appears in your content paths, so I think this is either a configuration issue or you have those strings in your project in places you don't realize.

[HakanSungur]

I'm starting to think that I can't fully explain the question to you. I am using Tailwind Css in my project. The fact that a CSS used on one page is not used on another page causes Google Page Speed to give the "Reduce unused CSS" error. This causes the site to fall far behind in Google rankings. I'm looking for a solution about this. You can see and evaluate the full project on Vacbid.com. CSS used on one page is not used on another page, compiling the project's CSS into a single package and having the user download it is a huge problem in large projects. I'm trying to figure this out. However, the answers given only ignore the question by saying that these CSS are already used on another page of the project. This is exactly what I'm trying to figure out. How can I eliminate unused CSS on a page without transferring it to the user?

[harishash]

@HakanSungur There might be 2 ways to look at this.

1. I want tailwind to purge all the classes that are not being used on a "Single Page". If bottom-3 is being used on mysite.com/home and not on mysite.com/login, it shouldn't appear in the unused css because /login isn't utilizing this class.

2. I want tailwind to purge all the classes that are not being used in the entire "Project". This means if bottom-3 was used on mysite.com/home and not on mysite.com/login, it will still appear in the css file since its being used in the Project. I think this is more likely happening because the unused css is purged during build time and single pages are served from the server after the build has happened.

@adamwathan can confirm what's actually happening. I'm experiencing the same issue so a definitive answer would be awesome. I have a project with Nextjs 14 and TailwindCSS. While optimizing the performance I looked into unused css and 86% of my CSS is unused on that page that i ran through lighthouse.

[HakanSungur]

Which version of Tailwind css are you using? I'm facing exactly the same problem as you. In fact, tailwind cleans what you mentioned in the 2nd article, which is not used throughout the project, but it does not clean what you mentioned in the 1st article. I'm looking for a solution to this.

[Arunjenson]

any update on this?

[HakanSungur]

No yet. Arun Jenson ***@***.***>, 22 Tem 2024 Pzt, 11:29 tarihinde şunu yazdı:

…

any update on this? — Reply to this email directly, view it on GitHub <#13668 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASYDI5WL2UKSQHMX2QFGNZTZNS7FRAVCNFSM6AAAAABHR6WEV2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMJRGIYTQNQ> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[nielsbom]

This issue still needs:

an actual reproduction that people can clone down
(as @adamwathan said)

[mx79]

Yes same problem for me

[muhafiz5814]

Same problem still exists until I quit and restart the tailwindCSS build process using command described here

Issue is something like this:
Suppose I have given class mx-1 to an HTML element in my source file. It will generate CSS for it in the output CSS file.
Now I have change of plans or change of design and I need to change margin from mx-1 to mx-3.

Real issue arises here. As the build process is running in terminal, it will quickly rebuild CSS for mx-3 in output CSS file but it will not remove CSS for mx-1 even though it does not exist in my source HTML file anymore.

So, I wanted to ask if it's a bug or I will have to do some configuration for it or any other command option for it to work correctly ?

I hope I am able to explain the issue and expecting to get solution to it.

[RobinMalfait]

This is a trade-off we made for development builds to keep it fast, once something is generated it would be wasted work to remove it again and later re-compute it.

In practice it shouldn't cause any issues because:

• typically you want to create a production build that adds vendor prefixes and minifies your css
• if a class exists but isn't used, then the CSS won't affect anything on the page

If you really care that these are removed during development, then you could save your config file or main CSS file containing the Tailwind CSS @tailwind directives to force a rebuild.

[Viswaksena-J]

any update on this?

[RobinMalfait]

There is no update, Tailwind works as expected:

1. It will only generate what is being used, see: https://tailwindcss.com/docs/detecting-classes-in-source-files
2. In development, to keep things fast we don't delete code, see: Tailwind does not delete unused css #13668 (reply in thread)