Streamlining your Tailwind CSS workflow with ESLint + Prettier

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

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • eslint-plugin-tailwindcss

    ESLint plugin for Tailwind CSS usage

    eslint-plugin-tailwindcss for ESLint

  • prettier-plugin-tailwindcss

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

    prettier-plugin-tailwindcss for Prettier

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • 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.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  • 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