ESLint Plugin for Tailwind CSS Usage

eslint-plugin-tailwindcss: ESLint Plugin for Tailwind CSS Usage - Rules enforcing best practices and consistency using Tailwind CSS v2.1.2

eslint-plugin-tailwindcss

Rules enforcing best practices and consistency using Tailwind CSS v2.1.2

🎉 Since v1.5.0, the plugin will parse the tailwind.config.js file and use the correct values based on your own settings. 👍 Most of the new JIT mode features are also supported.

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-tailwindcss:

$ npm i eslint-plugin-tailwindcss --save-dev

eslint-plugin-tailwindcss on npm

Usage

Add tailwindcss to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
  "plugins": ["tailwindcss"]
}

Configure the rules you want to use under the rules section.

{
  "rules": {
    "tailwindcss/classnames-order": "warn",
    "tailwindcss/no-custom-classname": "warn",
    "tailwindcss/no-contradicting-classname": "error"
  }
}

Learn more about Configuring Rules in ESLint.

Optional shared settings

Most rules shares the same settings, instead of duplicating some options...

You should also specify settings that will be shared across all the plugin rules. More about eslint shared settings.

All these settings have nice default values that are explained in each rules' documentation. I'm listing them in the code below just to show them.

{
  "settings": {
    "tailwindcss": {
      // These are the default values but feel free to customize
      "callees": ["classnames", "clsx", "ctl"],
      "config": "tailwind.config.js",
      "groups": defaultGroups, // imported from groups.js
      "prependCustom": false,
      "removeDuplicates": true,
      "whitelist": []
    }
  }
}

The plugin will look for each setting value in this order and stop looking as soon as it finds the settings:

1. In the rule option argument (rule level)
2. In the shared settings (plugin level)
3. Default value of the requested setting (plugin level)...

Supported Rules

Learn more about each supported rules by reading their documentation:

• classnames-order: order classnames by target properties then by variants ([size:][theme:][state:])
• no-custom-classname: only allow classnames from Tailwind CSS and the values from the whitelist option
• no-contradicting-classname: 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

• no-redundant-variant: e.g. avoid mx-5 sm:mx-5, no need to redefine mx in sm: variant as it uses the same value (5)

Alternatives

I wrote this plugin after searching for existing tools which perform the same task but didn't satisfied my needs:

• eslint-plugin-tailwind, not bad but no support (yet) for variants sorting
• Headwind, only works within Visual Studio Code

Contributing

You are welcome to contribute to this project by reporting issues, feature requests or even opening Pull Requests.

Learn more about contributing to ESLint-plugin-TailwindCSS.

Download Details:

Author: francoismassart The Demo/Documentation: View The Demo/Documentation Download Link: Download The Source Code Official Website: https://github.com/francoismassart/eslint-plugin-tailwindcss License: MIT

eslint tailwind tailwindcss css javascript

It only takes a few minutes to set up Tailwind CSS with Vanilla JavaScript! You've probably used Tailwind CSS with a framework like React or Vue, but have you ever used it with Vanilla JavaScript? In this video, we'll walk through how to easily set it up!

Master Tailwind CSS with this Cheatsheet. Tailwind CSS allows us to build modern websites with the respective classes without writing a single native CSS. Tailwind is amazing since we have to only to specify the respective classes and Tailwind CSS will take care of everything. We will see the most basic CSS classes and their relative properties in CSS.

Check out this list of popular and open-source Tailwind CSS Plugins and Extensions to help you expand the features of the framework.

Extend Tailwind CSS configuration with local fonts or Google Fonts. To give your website a unique look and feel, you can choose to add new fonts to the Tailwind configuration. The default Tailwind classes include 3 different fonts. Font-sans is the default font that will be applied even when you don’t explicitly set the font-sans class. If you want to add more fonts to custom your website, Tailwind got your back too!

Discover Twin, a library that empowers developers to build better apps by blending the powers of Tailwind CSS along with CSS-in-JS. This article examines Twin to understand how it works and provides a tutorial for using it in a React app. Use Twin to style your frontend components using Tailwind CSS classes and compile them to any CSS-in-JS library.