Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

eslint-plugin-tailwindcss

Package Overview
Dependencies
Maintainers
1
Versions
184
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

eslint-plugin-tailwindcss - npm Package Compare versions

Comparing version 1.9.1 to 1.10.0

tests/lib/index.js

24

lib/index.js

@@ -13,6 +13,22 @@ /**

var base = __dirname + '/rules/';
module.exports.rules = {
'classnames-order': require(base + 'classnames-order'),
'no-contradicting-classname': require(base + 'no-contradicting-classname'),
'no-custom-classname': require(base + 'no-custom-classname'),
module.exports = {
rules: {
'classnames-order': require(base + 'classnames-order'),
'no-contradicting-classname': require(base + 'no-contradicting-classname'),
'no-custom-classname': require(base + 'no-custom-classname'),
},
configs: {
recommended: {
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
rules: {
'tailwindcss/classnames-order': 'warn',
'tailwindcss/no-custom-classname': 'warn',
'tailwindcss/no-contradicting-classname': 'error',
},
},
},
};

2

lib/rules/classnames-order.js

@@ -21,3 +21,3 @@ /**

// messageId will still be usable in tests.
const INVALID_CLASSNAMES_ORDER_MSG = 'Invalid Tailwind CSS classenames order';
const INVALID_CLASSNAMES_ORDER_MSG = 'Invalid Tailwind CSS classnames order';

@@ -24,0 +24,0 @@ module.exports = {

{
"name": "eslint-plugin-tailwindcss",
"version": "1.9.1",
"version": "1.10.0",
"description": "Rules enforcing best practices while using Tailwind CSS",

@@ -5,0 +5,0 @@ "keywords": [

@@ -13,4 +13,15 @@ # eslint-plugin-tailwindcss

![detected-errors](https://user-images.githubusercontent.com/704026/117103443-ac1b0780-ad7a-11eb-9c17-41f0de3e4dc4.png)
## Supported Rules
Learn more about each supported rules by reading their documentation:
- [`classnames-order`](docs/rules/classnames-order.md): order classnames by target properties then by variants (`[size:][theme:][state:]`)
- [`no-custom-classname`](docs/rules/no-custom-classname.md): only allow classnames from Tailwind CSS and the values from the `whitelist` option
- [`no-contradicting-classname`](docs/rules/no-contradicting-classname.md): e.g. avoid `p-2 p-3`, different Tailwind CSS classnames (`pt-2` & `pt-3`) but targeting the same property several times for the same variant.
Using ESLint extension for Visual Studio Code, you will get these messages
![detected-errors](https://user-images.githubusercontent.com/704026/120854472-83567f80-c57d-11eb-9eaa-18d33b98c60c.png)
You can can the same information on your favorite command line software as well.
## Installation

@@ -30,6 +41,2 @@

[eslint-plugin-tailwindcss on npm](https://www.npmjs.com/package/eslint-plugin-tailwindcss)
## Usage
Add `tailwindcss` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix:

@@ -43,4 +50,18 @@

## Configuration
Use our preset to get reasonable defaults:
```
"extends": [
"plugin:tailwindcss/recommended"
]
```
If you do not use a preset you will need to specify individual rules and add extra configuration:
Configure the rules you want to use under the rules section.
> The following lines are matching the configuration saved `recommended` preset...
```json

@@ -89,10 +110,2 @@ {

## Supported Rules
Learn more about each supported rules by reading their documentation:
- [`classnames-order`](docs/rules/classnames-order.md): order classnames by target properties then by variants (`[size:][theme:][state:]`)
- [`no-custom-classname`](docs/rules/no-custom-classname.md): only allow classnames from Tailwind CSS and the values from the `whitelist` option
- [`no-contradicting-classname`](docs/rules/no-contradicting-classname.md): e.g. avoid `p-2 p-3`, different Tailwind CSS classnames (`pt-2` & `pt-3`) but targeting the same property several times for the same variant.
## Upcoming Rules

@@ -99,0 +112,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc