Tailwind CSS for frontend teams: From settings to rules

This page summarizes the projects mentioned and recommended in the original post on dev.to

CodeRabbit: AI Code Reviews for Developers
Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.
coderabbit.ai
featured
SaaSHub - Software Alternatives and Reviews
SaaSHub helps you find the best software and product alternatives
www.saashub.com
featured
  • clsx

    A tiny (239B) utility for constructing `className` strings conditionally.

    To make class-based Tailwind easy to use, we used the clsx library to help manipulate class names. However, using clsx and Tailwind together often doesn't work as intended.

  • CodeRabbit

    CodeRabbit: AI Code Reviews for Developers. Revolutionize your code reviews with AI. CodeRabbit offers PR summaries, code walkthroughs, 1-click suggestions, and AST-based analysis. Boost productivity and code quality across all major languages with each PR.

    CodeRabbit logo
  • tailwind-merge

    Merge Tailwind CSS classes without style conflicts

    So the library I use is tailwind-merge, which is a class that eliminates conflicts between classes when using Tailwind. So I created the following utility function.

  • prettier-plugin-tailwindcss

    A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order.

    Since this was a problem that many people had already encountered, there was already a solution. The first thing I found was Tailwind's official Prettier plugin, which ensures that class names are always ordered according to a certain rule. Best of all, it's auto-correcting, so I don't accidentally miss something or commit a different order.

  • eslint-plugin-tailwindcss

    ESLint plugin for Tailwind CSS usage

    However, after a little more searching, we found this plugin, which is maintained by the community and has slightly more rules than the official plugin's class name ordering rules. Again, most of the rules support auto-correction. Here are the rules the team chose to use

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts

  • Tailwind is overrated

    3 projects | /r/webdev | 25 Oct 2021
  • Dicas para escrever Tailwind CSS de forma limpa

    3 projects | dev.to | 13 Sep 2024
  • Build Your Application Faster with These TailwindCSS Components Libraries

    3 projects | dev.to | 4 Sep 2024
  • Visually building Tailwind CSS components using Flowbite and Daisy UI

    2 projects | dev.to | 14 Aug 2024
  • “cn” utility function in shadcn-ui/ui:

    4 projects | dev.to | 23 May 2024

Did you konow that JavaScript is
the 3rd most popular programming language
based on number of metions?