ESLint Plugin for Tailwind CSS Usage

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

What is GEEK

Buddha Community

Popular Tailwind CSS Plugins and Extensions - Themesberg Blog

By reading this article you will browse a list of the most popular plugins and extensions for the utility-first CSS framework, Tailwind CSS. Although the default code base of the framework already covers a lot of the needs when building user interfaces, you can never get enough plugins and extensions powered by the open-source community.

One of the requirements for a plugin to appear on this list is to be open-source with no other strings attached so that the developers browsing this list can stay assured that they can use the plugin for their Tailwind CSS powered project.

Check out the list of Tailwind CSS Plugins and Extensions on Themesberg.

#tailwindcss #tailwind #tailwind-css #tailwind-css-plugins #themesberg

ESLint Plugin for Tailwind CSS Usage

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

Useful Tailwind CSS Libraries and Plugins

Tailwind CSS is a CSS framework that’s designed to make creating reusable components easier, facilitate development by minimizing the repeated CSS you’ll have to write yourself, and optimize the size of the final compiled CSS file.

In this article, we’ll go over some libraries and plugins that will be useful during your development using Tailwind CSS.

• DaisyUI
• Heroicons
• Windmill React UI
• Tailwind Typography
• Twin
• Tailwind CSS Line Clamp
• Material Tailwind

#css #tailwind css #plugins

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Tailwind CSS tutorial

In this tutorial I would like to introduce you to one of the fastest growing and promising CSS Frameworks at the moment, Tailwind CSS. It is different from other frameworks, such as Bootstrap, because it is built on a new way of building user interfaces using a utility-first CSS classes structure, as opposed to the OOCSS structure from other frameworks.

By the end of this guide you will be able to install, configure and build a responsive hero section (live demo) using the utility-first classes from Tailwind CSS and configure the project using the recommended PostCSS powered Tailwind configuration file for better maintainability and versatility.

Here’s the table of contents for this tutorial for Tailwind CSS:

• Introducing Tailwind CSS
• Adding Tailwind CSS to your project via a package manager
• Creating the configuration file and process your CSS with Tailwind
• Building a responsive hero section using the utility-first classes from Tailwind
• Customize fonts, colors and add extra classes using the configuration file
• Reduce loading time and file size by purging the unused classes from your CSS
• Conclusion and summary

Read the full tutorial from Themesberg.

#tailwind #tailwind-css #tailwind-css-tutorial #tutorial #open-source