v2.0.0

[schoero]

Support for tailwindcss 4

v2 adds support for tailwindcss 4 and the css based configuration. Please let me know if you encounter any
issues or if it works for you already.

Aside from support for tailwindcss 4, several options have changed slightly.

compare changes

Features

• ⚠️ Add support for tailwindcss v4 (#25)
• ⚠️ Regex names (#63)

Fixes

• Options correctly override settings (#66)

Refactors

• ⚠️ Enable no-duplicate-classes by default (#67)
• ⚠️ Change default multiline grouping to newLine (#68)
• ⚠️ Rename classAttributes to attributes (#69)

⚠️ Breaking Changes

• ⚠️ Drop support for Node.js < 20 due to incompatibility of worker threads.

• ⚠️ Add support for tailwindcss v4 (#25)

  • The official class ordering seems to have changed slightly.

• ⚠️ Regex names (#63)

  • "Names" can now be regular expressions. This is a breaking change, if you have names configured that contain reserved characters in regular expressions like $.

• ⚠️ Enable no-duplicate-classes by default (#67)

• ⚠️ Change default multiline grouping to newLine (#68)

• ⚠️ Rename classAttributes to attributes (#69)

---

This discussion was created from the release v2.0.0.

[beniaminrychter]

Hi! We are using readable-tailwind in our project, and recently we upgraded TW to v4. I installed beta version of your eslint plugin but get following error when linting.

ESlint version: 8.57.0

/node_modules/eslint-plugin-readable-tailwind/lib/cjs/tailwind/async/class-order.sync.js:22
    return import.meta.dirname ?? __dirname;
                  ^^^^

SyntaxError: Cannot use 'import.meta' outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/node_modules/eslint-plugin-readable-tailwind/lib/cjs/rules/tailwind-sort-classes.js:5:55)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)

My config:

module.exports = {
    extends: [
        './eslint-config/recommended',
        'next/core-web-vitals',
        'plugin:readable-tailwind/error',
        'prettier',
    ],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: './tsconfig.eslint.json',
    },
    plugins: ['readable-tailwind'],
    root: true,
    rules: {
        'unicorn/no-useless-undefined': 'off',
    },
};

[schoero]

Thank you for the feedback. Seems like it is not yet compatible with the CommonJS ESLint config. I will look into it.

[schoero]

I just released v2.0.0-beta.1 which should fix the issue with CommonJS configs.

[beniaminrychter]

Thank you @schoero for quick response and fix. It works perfectly right now 😊