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