Skip to content

[Bug]: th:classappend/th:class not working #175

@HowieHz

Description

@HowieHz

version

4.1.18

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-f3fw9cet?file=README.md

Steps to reproduce

Image

Example Code:

<h1 class="text-3xl">Hello world!</h1>
<h1 th:class="text-3xl">Hello world!</h1>
<h1 th:classappend="${theme} ? 'text-3xl' : '' ">Hello world!</h1>
  1. Run npm run build && npm run preview to start the product preview.
  2. Check the generated product's class, th:class, and th:classappend attributes in the preview.

What is expected?

<h1 class="tw-b">Hello world!</h1>
<h1 th:class="tw-b">Hello world!</h1>
<h1 th:classappend="${theme} ? 'tw-b' : '' ">Hello world!</h1>

What is actually happening?

<h1 class="tw-b">Hello world!</h1>
<h1 th:class="text-3xl">Hello world!</h1>
<h1 th:classappend="${theme} ? 'text-3xl' : '' ">Hello world!</h1>

System Info

System:
    OS: Windows 11 10.0.26200
    CPU: (24) x64 AMD Ryzen AI 9 HX 370 w/ Radeon 890M
    Memory: 9.73 GB / 31.12 GB
  Binaries:
    Node: 25.2.1 - D:\Scoop\apps\nodejs\current\node.EXE
    npm: 11.6.2 - D:\Scoop\apps\nodejs\current\npm.CMD
    pnpm: 10.11.0 - D:\Scoop\apps\nodejs\current\bin\pnpm.CMD
  npmPackages:
    @dreamsicle.io/stylelint-config-tailwindcss: ^1.1.2 => 1.1.2
    @eslint/compat: ^2.0.0 => 2.0.0
    @eslint/js: ^9.39.1 => 9.39.1
    @ianvs/prettier-plugin-sort-imports: ^4.7.0 => 4.7.0
    @iconify-json/ant-design: ^1.2.5 => 1.2.5
    @iconify-json/cib: ^1.2.3 => 1.2.3
    @iconify-json/entypo-social: ^1.2.3 => 1.2.3
    @iconify-json/fa-solid: ^1.2.2 => 1.2.2
    @iconify-json/fluent: ^1.2.36 => 1.2.36
    @iconify-json/heroicons-outline: ^1.2.1 => 1.2.1
    @iconify-json/ic: ^1.2.4 => 1.2.4
    @iconify-json/icomoon-free: ^1.2.1 => 1.2.1
    @iconify-json/material-symbols: ^1.2.49 => 1.2.50
    @iconify-json/mdi: ^1.2.3 => 1.2.3
    @iconify-json/pepicons-pencil: ^1.2.3 => 1.2.3
    @iconify-json/ph: ^1.2.2 => 1.2.2
    @iconify-json/ri: ^1.2.6 => 1.2.6
    @iconify-json/simple-icons: ^1.2.62 => 1.2.62
    @iconify-json/tabler: ^1.2.23 => 1.2.23
    @iconify-json/typcn: ^1.2.2 => 1.2.2
    @iconify-json/uil: ^1.2.3 => 1.2.3
    @iconify/tailwind4: ^1.2.0 => 1.2.0
    @tailwindcss/vite: ^4.1.17 => 4.1.18
    @types/alpinejs: ^3.13.11 => 3.13.11
    @types/node: ^25.0.0 => 25.0.1
    @types/picomatch: ^4.0.2 => 4.0.2
    @typescript-eslint/parser: ^8.49.0 => 8.49.0
    @typescript/native-preview: 7.0.0-dev.20251211.1 => 7.0.0-dev.20251211.1
    @vitejs/plugin-legacy: ^7.2.1 => 7.2.1
    alpinejs: ^3.15.2 => 3.15.2
    autocorrect-node: ^2.14.0 => 2.14.0
    browserslist: ^4.28.1 => 4.28.1
    eslint: ^9.39.1 => 9.39.1
    eslint-config-prettier: ^10.1.8 => 10.1.8
    eslint-plugin-import-x: ^4.16.1 => 4.16.1
    eslint-plugin-oxlint: ^1.32.0 => 1.32.0
    eslint-plugin-prettier: ^5.5.4 => 5.5.4
    eslint-plugin-vue: ^10.6.2 => 10.6.2
    globals: ^16.5.0 => 16.5.0
    husky: ^9.1.7 => 9.1.7
    lightningcss: ^1.30.2 => 1.30.2
    markdownlint-cli: ^0.47.0 => 0.47.0
    oxlint: ^1.32.0 => 1.32.0
    oxlint-tsgolint: ^0.8.5 => 0.8.6
    picomatch: ^4.0.3 => 4.0.3
    postcss: ^8.5.6 => 8.5.6
    postcss-cli: ^11.0.1 => 11.0.1
    postcss-preset-env: ^10.5.0 => 10.5.0
    prettier: ^3.7.4 => 3.7.4
    prettier-plugin-tailwindcss: ^0.7.2 => 0.7.2
    rolldown-vite:  7.2.11
    stylelint: ^16.26.1 => 16.26.1
    stylelint-config-html: ^1.1.0 => 1.1.0
    stylelint-config-recommended-vue: ^1.6.1 => 1.6.1
    stylelint-config-standard: ^39.0.1 => 39.0.1
    stylelint-order: ^7.0.0 => 7.0.0
    stylus: ^0.64.0 => 0.64.0
    stylus-supremacy: ^5.0.0 => 5.0.0
    tailwindcss: ^4.1.18 => 4.1.18
    tailwindcss-patch: ^8.4.3 => 8.4.3
    typescript-eslint: ^8.49.0 => 8.49.0
    unplugin-tailwindcss-mangle: ^5.0.0 => 5.0.0
    vue-eslint-parser: ^10.2.0 => 10.2.0

Any additional comments?

(In the example, a normal class is added for comparison; the subsequent content remains valid without the first normal class.) The scanning is right, Tailwind reads the styles correctly, and tw-class-list.json shows the styles, but th:class and th:classappend are not replaced properly.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions