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?

[HakanSungur]

I wonder if I should switch to Tailwind 4, because providing 35kb of extra CSS slows down the site for the user and Google does not crawl the site.

[BhavikTrambadiya]

Please visit more pages on your website, and if the percentage of unused CSS decreases, it doesn't necessarily mean it's unused. It might be utilized when a class is present in the DOM

[HakanSungur]

First of all, I know what you said. However, it does not answer the question I asked. On this page, the CSS used on the other page appears to be unused, which appears as an error in page speed and puts me below my competitors in SEO. I want to solve this. Please don't answer just for the sake of answering. Let's focus on solving the problem. I guess you don't have a solution to solve the problem. I want unused css not to appear on this page. Do you have an answer to this?

[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?