🖥
Nuxt + tailwind + Eslint – template の style タグ指定でエラー ( Classname 'foo'
コード例
style でクラスを指定しても Tailwind のクラスを使っていないとエラーで怒られる
<template>
<div class="foo"></div>
</template>
<style scoped>
.foo {
color: red;
}
</style>
解決 -A
Eslintの設定 ( 例 eslintrc.js ) でクラス名をホワイトリスト指定する
eslintrc.js の例
module.exports = {
settings: {
tailwindcss: {
whitelist: ['foo'],
},
},
}
正規表現も指定できるようなので
命名規則を決めておくと楽かもしれない
( 例 foo-.+ をホワイトリスト指定すれば foo-xxx も foo-yyy も許容される )
解決 - B
Tailwindの設定 ( 例: tailwind.config.js ) でカスタムのクラス名 ( thema > extend )を作って style タグでの指定はしない
感想
「Tailwind入れたら全部Tailwindのクラス名で指定をしなさい」っていう方向性なのかもしれない
チャットメンバー募集
何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。
公開日時
2023-10-07
Discussion