Streamlining your Tailwind CSS workflow with ESLint + Prettier

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
  • eslint-plugin-tailwindcss

    ESLint plugin for Tailwind CSS usage

    eslint-plugin-tailwindcss for ESLint

  • 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
  • prettier-plugin-tailwindcss

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

    prettier-plugin-tailwindcss for Prettier

  • lint-staged

    🚫💩 — Run linters on git staged files

    To help automate the process, we can use husky to create a pre-commit hook that will run lint-staged, which in turn will run these linting scripts on staged files, before committing them.

  • husky

    Git hooks made easy 🐶 woof!

    To help automate the process, we can use husky to create a pre-commit hook that will run lint-staged, which in turn will run these linting scripts on staged files, before committing them.

  • javascript

    JavaScript Style Guide

    This particular config is based on the popular Airbnb Javascript Style Guide and extends the corresponding eslint-config-airbnb, as well as few others that I always find myself using. Feel free to use it in your project as well!

  • prettier

    Prettier is an opinionated code formatter.

    Then we have Prettier, which is an opinionated code formatter. It concerns itself more with code style - things like line length, indentation, syntax, etc. Prettier's main job is to ensure consistency in code, no matter the development enviornment or the number of people working on the same file.

  • ESLint

    Find and fix problems in your JavaScript code.

    In this article we'll take a look at how tools like ESLint and Prettier can help us never have to think about class names again, and provide some helpful guidance along the way.

  • SaaSHub

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    SaaSHub logo
  • Visual Studio Code

    Visual Studio Code

    Now this is where it gets even better. If you're using Visual Studio Code, there are extensions that can help automate things further.

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

  • Clean Code: Open Source Linting & Formatting

    5 projects | dev.to | 27 Oct 2024
  • Make Commit in Your React Project Format-Test-Build Ready with Husky - A Step-by-Step Guide

    4 projects | dev.to | 24 May 2024
  • Standardize Your Next.js Project with ESLint and Husky

    6 projects | dev.to | 30 Jan 2022
  • Tools to ensure code quality

    5 projects | dev.to | 7 Apr 2021
  • ESLint adoption guide: Overview, examples, and alternatives

    11 projects | dev.to | 8 Aug 2024