Automatic source detection finds unused classess

[wenbei]

The source detection is finding files outside of the src directory when imported in src/app.css. The output contains classes that are not used.

Currently I can fix it by disabling automatic source detection as noted in the docs. But based on what I understand from the docs, this should be identical to the base path used for source detection.

@import "tailwindcss/utilities" layer(utilities) source(none);
@source "../src";

Reproduce

1. Start with the create-vite template for svelte (https://github.com/vitejs/vite/tree/main/packages/create-vite/template-svelte-ts)
2. npm install tailwindcss @tailwindcss/vite and add the plugin to vite.config.ts
3. Delete all the styles in the files so the output css should be empty.
4. npm run build

Below is the build output with no styles in App.svelte with only the utilities layer in app.css.
@import "tailwindcss/utilities" layer(utilities);

/*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
@layer utilities {
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .container {
    width: 100%;
  }
  .\!block {
    display: block !important;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .\!transform {
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y) !important;
  }
  .transform {
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
  }
  .resize {
    resize: both;
  }
  .filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow,
      transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, ease);
    transition-duration: var(--tw-duration, 0s);
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
  initial-value: rotateX(0);
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
  initial-value: rotateY(0);
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
  initial-value: rotateZ(0);
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
  initial-value: skewX(0);
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
  initial-value: skewY(0);
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}

[glory63mack]

Hello,
You are encountering an issue with TailwindCSS and Vite configuration where source detection is picking up files outside the src directory, resulting in unused classes in the build output. Disabling automatic source detection can help, but you understandably want to ensure the base path is correct for source detection.

Given your steps to reproduce, the issue likely lies in how TailwindCSS is interpreting the paths during the build process. Ensure Correct Source Path: Double-check the source attribute in your @import statement. It should point to the correct path relative to your CSS file. @import "tailwindcss/utilities" layer(utilities) source("../src");
TailwindCSS Configuration: Make sure your tailwind.config.js is properly set up and includes red humana grupo éxito only the paths you want to be scanned for class usage. module.exports = {
content: [
"./src/**/*.{html,js,svelte,ts}",
],
theme: {
extend: {},
},
plugins: [],
}
Vite Configuration: Ensure the TailwindCSS plugin is correctly added to your vite.config.ts file. import { defineConfig } from 'vite'
import svelte from '@sveltejs/vite-plugin-svelte'
import tailwindcss from 'tailwindcss'

export default defineConfig({
plugins: [
svelte(),
tailwindcss(),
],
})
PurgeCSS Configuration (if applicable): If you're using PurgeCSS, double-check its configuration to ensure it's not purging required styles. module.exports = {
purge: {
content: [
'./src/**/*.{js,svelte,ts}',
],
safelist: ['fixed', 'absolute', 'relative', 'static'],
},
// Other Tailwind config...
}
Rebuild Project: Sometimes, Vite or TailwindCSS might have cached some files. Try clearing the cache and rebuilding your project: rm -rf node_modules/.vite && npm run build

Best Regard,
Glory

[philipp-spiess]

Hey! The Vite plugin looks at your module-graph, so all runtime libraries from Svelte etc are also considered which might contain some of the words that will be considered a candidate. We can probably improve the heuristics here a bit but this is still working by design: The Tailwind CSS compiler rather emits a class that is not used than omits a class that is used.

We might have some changes coming to the Vite plugin to make this less confusing though but for now this is expected I'm afraid. Thanks for the report though!