How do I install the Tailwind Eslint Fix skill?

Run npx skillmds@latest add shaowei-g/tailwind-eslint-fix in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Tailwind Eslint Fix safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: executes scripts. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Tailwind Eslint Fix?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Tailwind Eslint Fix free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Tailwind Eslint Fix?

shaowei-g (@shaowei-g) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Tailwind Eslint Fix by shaowei-g — Agent Skill

Name: Tailwind Eslint Fix
Rating: 4.666666666666667 (3 reviews)
Author: shaowei-g

Tailwind Eslint Fix

Auto-fix and verify ESLint better-tailwindcss warnings/errors in frontend files. Use after implementing or refactoring TSX/JSX/frontend code (React, Next.js, Tailwind) when you need to clean up Tailwind class order, canonical class forms, shorthand classes, and line-wrapping warnings.

shaowei-g Updated Sep 10, 2026

File contents

Tailwind ESLint Fix

Overview

Use this skill after frontend implementation or refactoring to resolve better-tailwindcss/* lint issues quickly and consistently. It runs ESLint auto-fix on the target scope, then checks whether any better-tailwindcss warnings/errors still remain.

Workflow

Choose scope:

Default scope: all frontend source files (src/**/*.{ts,tsx,js,jsx}).
Preferred scope: only changed files/directories to keep edits focused.

Run the fixer script:

~/.codex/skills/tailwind-eslint-fix/scripts/fix_better_tailwind.sh \
  --project-dir <frontend-package-dir> \
  --pm <auto|pnpm|yarn|npm> \
  --target "<eslint-glob-or-file-list>"

Review results:

If script reports no remaining better-tailwindcss issues: done.
If issues remain: fix manually, then rerun script until clean.

Keep scope strict:

Do not treat unrelated eslint rules as part of this skill's success criteria.
This skill targets only better-tailwindcss warnings/errors.

Quick Commands

Fix whole frontend package:

~/.codex/skills/tailwind-eslint-fix/scripts/fix_better_tailwind.sh \
  --project-dir packages/eKoEN \
  --pm auto

Force yarn:

~/.codex/skills/tailwind-eslint-fix/scripts/fix_better_tailwind.sh \
  --project-dir packages/eKoEN \
  --pm yarn

Force npm:

~/.codex/skills/tailwind-eslint-fix/scripts/fix_better_tailwind.sh \
  --project-dir packages/eKoEN \
  --pm npm

Fix specific directory:

~/.codex/skills/tailwind-eslint-fix/scripts/fix_better_tailwind.sh \
  --project-dir packages/eKoEN \
  --pm auto \
  --target "src/RefactorComponents/**/*.{ts,tsx}"

Fix specific files:

~/.codex/skills/tailwind-eslint-fix/scripts/fix_better_tailwind.sh \
  --project-dir packages/eKoEN \
  --pm auto \
  --target "src/components/LanguageSelector.tsx src/RefactorComponents/Selects/SelectButton/SingleValue.tsx"

Notes

This skill supports pnpm, yarn, and npm.
Use --pm auto to detect by lockfile (pnpm-lock.yaml, yarn.lock, package-lock.json) or available command.

Resources

scripts/

fix_better_tailwind.sh: runs eslint --fix on a target scope and verifies remaining better-tailwindcss findings.

---name: tailwind-eslint-fixdescription: Auto-fix and verify ESLint better-tailwindcss warnings/errors in frontend files. Use after implementing or refactoring TSX/JSX/frontend code (React, Next.js, Tailwind) when you need to clean up Tailwind class order, canonical class forms, shorthand classes, and line-wrapping warnings.---# Tailwind ESLint Fix## OverviewUse this skill after frontend implementation or refactoring to resolve `better-tailwindcss/*` lint issues quickly and consistently.It runs ESLint auto-fix on the target scope, then checks whether any `better-tailwindcss` warnings/errors still remain.## Workflow1. Choose scope:- Default scope: all frontend source files (`src/**/*.{ts,tsx,js,jsx}`).- Preferred scope: only changed files/directories to keep edits focused.2. Run the fixer script:```bash~/.codex/skills/tailwind-eslint-fix/scripts/fix_better_tailwind.sh \ --project-dir <frontend-package-dir> \ --pm <auto|pnpm|yarn|npm> \ --target "<eslint-glob-or-file-list>"```3. Review results:- If script reports no remaining `better-tailwindcss` issues: done.- If issues remain: fix manually, then rerun script until clean.4. Keep scope strict:- Do not treat unrelated eslint rules as part of this skill's success criteria.- This skill targets only `better-tailwindcss` warnings/errors.## Quick CommandsFix whole frontend package:```bash~/.codex/skills/tailwind-eslint-fix/scripts/fix_better_tailwind.sh \ --project-dir packages/eKoEN \ --pm auto```Force `yarn`:```bash~/.codex/skills/tailwind-eslint-fix/scripts/fix_better_tailwind.sh \ --project-dir packages/eKoEN \ --pm yarn```Force `npm`:```bash~/.codex/skills/tailwind-eslint-fix/scripts/fix_better_tailwind.sh \ --project-dir packages/eKoEN \ --pm npm```Fix specific directory:```bash~/.codex/skills/tailwind-eslint-fix/scripts/fix_better_tailwind.sh \ --project-dir packages/eKoEN \ --pm auto \ --target "src/RefactorComponents/**/*.{ts,tsx}"```Fix specific files:```bash~/.codex/skills/tailwind-eslint-fix/scripts/fix_better_tailwind.sh \ --project-dir packages/eKoEN \ --pm auto \ --target "src/components/LanguageSelector.tsx src/RefactorComponents/Selects/SelectButton/SingleValue.tsx"```## Notes- This skill supports `pnpm`, `yarn`, and `npm`.- Use `--pm auto` to detect by lockfile (`pnpm-lock.yaml`, `yarn.lock`, `package-lock.json`) or available command.## Resources### scripts/- `fix_better_tailwind.sh`: runs eslint `--fix` on a target scope and verifies remaining `better-tailwindcss` findings.

Frequently asked questions