Nuxt•5mo ago

Nuxt eslint, sort tailwindcss

hello, here you say that prettier is useless with the new eslint module, but then how to sort tailwind classes? With prettier I was using prettier-plugin-tailwindcss but is there a solution with eslint?

Nuxt

Contribution · Nuxt Community

Nuxt is a community project - and so we love contributions of all kinds! ❤️

4 Replies

dwol•5mo ago

Ive been using this and it works great. https://www.npmjs.com/package/eslint-plugin-tailwindcss

npm

eslint-plugin-tailwindcss

Rules enforcing best practices while using Tailwind CSS. Latest version: 3.15.1, last published: a month ago. Start using eslint-plugin-tailwindcss in your project by running npm i eslint-plugin-tailwindcss. There are 293 other projects in the npm registry using eslint-plugin-tailwindcss.

Muhammad Mahmoud•5mo ago

I'm using this with antfu/eslint-config. I haven't migrated to the new nuxt/eslint module but will be pretty much the same

import { FlatCompat } from '@eslint/eslintrc'
import antfu from '@antfu/eslint-config'
import eslintConfigPrettier from 'eslint-config-prettier'

const compat = new FlatCompat()
const tailwindCompatConfig = compat.config({
  extends: ['plugin:tailwindcss/recommended'],
  rules: { 'tailwindcss/no-custom-classname': 'off' },
})

export default antfu(
  {
    stylistic: false, // Disable stylistic rules as we're using Prettier
  },
  ...tailwindCompatConfig,
  eslintConfigPrettier,
)

import { FlatCompat } from '@eslint/eslintrc'
import antfu from '@antfu/eslint-config'
import eslintConfigPrettier from 'eslint-config-prettier'

const compat = new FlatCompat()
const tailwindCompatConfig = compat.config({
  extends: ['plugin:tailwindcss/recommended'],
  rules: { 'tailwindcss/no-custom-classname': 'off' },
})

export default antfu(
  {
    stylistic: false, // Disable stylistic rules as we're using Prettier
  },
  ...tailwindCompatConfig,
  eslintConfigPrettier,
)

Cetus 🔛🔝•5mo ago

whats the module for plugin:tailwindcss/recommended ?

Muhammad Mahmoud•5mo ago

https://www.npmjs.com/package/eslint-plugin-tailwindcss

npm

eslint-plugin-tailwindcss

Gaming

Programming

Nuxt eslint, sort tailwindcss