🖥

Nuxt + tailwind + Eslint – template の style タグ指定でエラー ( Classname 'foo'

2024/01/02に公開

コード例

style でクラスを指定しても Tailwind のクラスを使っていないとエラーで怒られる

<template>
  <div class="foo"></div>
</template>

<style scoped>
.foo {
  color: red;
}
</style>

Eslintの設定 ( 例 eslintrc.js ) でクラス名をホワイトリスト指定する

eslintrc.js の例

module.exports = {
  settings: {
    tailwindcss: {
      whitelist: ['foo'],
    },
  },
}

正規表現も指定できるようなので
命名規則を決めておくと楽かもしれない

( 例 foo-.+ をホワイトリスト指定すれば foo-xxx も foo-yyy も許容される )

Tailwindの設定 ( 例: tailwind.config.js ) でカスタムのクラス名 ( thema > extend )を作って style タグでの指定はしない

「Tailwind入れたら全部Tailwindのクラス名で指定をしなさい」っていう方向性なのかもしれない

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

2023-10-07