Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
eslint-plugin-tailwindcss
Advanced tools
eslint-plugin-tailwindcss - npm Package Compare versions
Comparing version 3.15.3-beta.0 to 3.16.0-beta.0
@@ -25,21 +25,5 @@ /** | ||
| configs: { | ||
| recommended: { | ||
| plugins: ['tailwindcss'], | ||
| parserOptions: { | ||
| ecmaFeatures: { | ||
| jsx: true, | ||
| }, | ||
| }, | ||
| rules: { | ||
| 'tailwindcss/classnames-order': 'warn', | ||
| 'tailwindcss/enforces-negative-arbitrary-values': 'warn', | ||
| 'tailwindcss/enforces-shorthand': 'warn', | ||
| 'tailwindcss/migration-from-tailwind-2': 'warn', | ||
| 'tailwindcss/no-arbitrary-value': 'off', | ||
| 'tailwindcss/no-custom-classname': 'warn', | ||
| 'tailwindcss/no-contradicting-classname': 'error', | ||
| 'tailwindcss/no-unnecessary-arbitrary-value': 'warn', | ||
| }, | ||
| }, | ||
| recommended: require('./config/recommended'), | ||
| 'flat/recommended': require('./config/flat-recommended'), | ||
| }, | ||
| }; |
| { | ||
| "name": "eslint-plugin-tailwindcss", | ||
| "version": "3.15.3-beta.0", | ||
| "version": "3.16.0-beta.0", | ||
| "description": "Rules enforcing best practices while using Tailwind CSS", | ||
@@ -21,3 +21,5 @@ "keywords": [ | ||
| "scripts": { | ||
| "test": "mocha tests --recursive" | ||
| "test": "npm run test:base && npm run test:integration", | ||
| "test:base": "mocha \"tests/lib/**/*.js\"", | ||
| "test:integration": "mocha \"tests/integrations/*.js\" --timeout 60000" | ||
| }, | ||
@@ -43,7 +45,8 @@ "files": [ | ||
| "daisyui": "^2.6.4", | ||
| "eslint": "^7.1.0", | ||
| "eslint": "^8.57.0", | ||
| "mocha": "^10.2.0", | ||
| "semver": "^7.6.0", | ||
| "tailwindcss": "^3.4.0", | ||
| "typescript": "4.3.5", | ||
| "vue-eslint-parser": "^9.1.0" | ||
| "vue-eslint-parser": "^9.4.2" | ||
| }, | ||
@@ -50,0 +53,0 @@ "packageManager": "npm@10.2.5+sha256.8002e3e7305d2abd4016e1368af48d49b066c269079eeb10a56e7d6598acfdaa", |
106
README.md
@@ -72,3 +72,3 @@ # eslint-plugin-tailwindcss | ||
| ### 1. Install `eslint` | ||
| ### 1. Install `eslint` and `eslint-plugin-tailwindcss` | ||
@@ -78,32 +78,36 @@ You'll first need to install [ESLint](http://eslint.org): | ||
| ``` | ||
| $ npm i -D eslint | ||
| $ npm i -D eslint eslint-plugin-tailwindcss | ||
| ``` | ||
| Then, create you `.eslintrc.js` file | ||
| ### 2. Create Configuration file | ||
| #### `.eslintrc` | ||
| Use .eslintrc.* file to configure rules in ESLint < v9. See also: https://eslint.org/docs/latest/use/configure/. | ||
| ```js | ||
| module.exports = { | ||
| root: true, | ||
| extends: ["plugin:tailwindcss/recommended"], | ||
| }; | ||
| ``` | ||
| ### 2. Install `eslint-plugin-tailwindcss` | ||
| If you would like to know about configuration, Learn more in [ESLint docs](https://eslint.org/docs/latest/use/configure/configuration-files) | ||
| ``` | ||
| $ npm i -D eslint-plugin-tailwindcss | ||
| ``` | ||
| Edit your `.eslintrc` file to use our [`recommended` preset](https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/master/lib/index.js#L24) to get reasonable defaults: | ||
| #### `eslint.config.js` | ||
| Use `eslint.config.js` file to configure rules. This is the default in ESLint v9, but can be used starting from ESLint v8.57.0. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new. | ||
| ```js | ||
| module.exports = { | ||
| root: true, | ||
| extends: ["plugin:tailwindcss/recommended"], | ||
| }; | ||
| import tailwind from "eslint-plugin-tailwindcss"; | ||
| export default [ | ||
| ...tailwind.configs["flat/recommended"], | ||
| ]; | ||
| ``` | ||
| > If you do not use our preset you will need to specify individual rules and add extra configuration... | ||
| If you would like to know about configuration, Learn more in [ESLint docs](https://eslint.org/docs/latest/use/configure/configuration-files-new) | ||
| Learn more about [Configuring Rules in ESLint](https://eslint.org/docs/user-guide/configuring/rules). | ||
| ### 3. Configure ESLint parsers | ||
@@ -115,2 +119,4 @@ | ||
| #### For `.eslintrc` | ||
| - For `js[x]`, `react`, `ts[x]`: | ||
@@ -152,2 +158,38 @@ - Install the parser: `npm i -D @typescript-eslint/parser` | ||
| #### For `eslint.config.js` | ||
| - For `js[x]`, `ts[x]`: | ||
| - Install the parser: `npm i -D @eslint/js typescript-eslint` | ||
| - Assign it to your files in `eslint.config.js`: | ||
| ```js | ||
| import js from "@eslint/js"; | ||
| import ts from "typescript-eslint"; | ||
| import tailwind from "eslint-plugin-tailwindcss"; | ||
| export default [ | ||
| // add eslint built-in | ||
| js.configs.recommended, | ||
| // add `typescript-eslint` flat config simply | ||
| // if you would like use more another configuration, | ||
| // see the section: https://typescript-eslint.io/getting-started#details | ||
| ...ts.configs.recommended, | ||
| ...tailwind.configs["flat/recommended"], | ||
| ]; | ||
| ``` | ||
| - For `vue.js`: | ||
| - Install the parser: `npm i -D eslint-plugin-vue` | ||
| - Assign it to your files in `eslint.config.js`: | ||
| ```js | ||
| import vue from "eslint-plugin-vue"; | ||
| import tailwind from "eslint-plugin-tailwindcss"; | ||
| export default [ | ||
| // add `eslint-plugin-vue` flat config simply | ||
| // if you would like use more another configuration, | ||
| // see the section: https://eslint.vuejs.org/user-guide/#bundle-configurations-eslint-config-js | ||
| ...vue.configs["flat/recommended"], | ||
| ...tailwind.configs["flat/recommended"], | ||
| ]; | ||
| ``` | ||
| ### 4. Add a npm script | ||
@@ -181,2 +223,4 @@ | ||
| #### For `.eslintrc` | ||
| FYI, here are the `default` values: | ||
@@ -209,2 +253,34 @@ | ||
| #### For `eslint.config.js` | ||
| ```js | ||
| import tailwind from "eslint-plugin-tailwindcss"; | ||
| export default [ | ||
| ...tailwind.configs["flat/recommended"], | ||
| { | ||
| settings: { | ||
| tailwindcss: { | ||
| // These are the default values but feel free to customize | ||
| callees: ["classnames", "clsx", "ctl"], | ||
| config: "tailwind.config.js", // returned from `loadConfig()` utility if not provided | ||
| cssFiles: [ | ||
| "**/*.css", | ||
| "!**/node_modules", | ||
| "!**/.*", | ||
| "!**/dist", | ||
| "!**/build", | ||
| ], | ||
| cssFilesRefreshRate: 5_000, | ||
| removeDuplicates: true, | ||
| skipClassAttribute: false, | ||
| whitelist: [], | ||
| tags: [], // can be set to e.g. ['tw'] for use in tw`bg-blue` | ||
| classRegex: "^class(Name)?$", // can be modified to support custom attributes. E.g. "^tw$" for `twin.macro` | ||
| }, | ||
| }, | ||
| } | ||
| ]; | ||
| ``` | ||
| The plugin will look for each setting in this order and stops searching as soon as it finds the settings: | ||
@@ -211,0 +287,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.68%
214084
- Number of package files
- increased by10.34%
32
- Lines of code
- increased by0.77%
5471
- Number of lines in readme file
- increased by34.55%
296
Worsened metrics
- Dev dependency count
- increased by7.69%
14
No dependency changes