TailwindCSSが適用されないときに確認したこと&JavaScriptでTailwind CSS IntelliSenseを使う方法

TailwindCSSが適用されないときに確認したこと&JavaScriptでTailwind CSS IntelliSenseを使う方法

JavaScriptで追加したTailwindCSSのクラスに、スタイルが摘要されず困ったので、調べたことをまとめました!

contentにパスを書こう

現在、もりけん塾のJavaScirpt課題20に取り組んでいるところです。

JavaScriptでTailwindCSSのクラスを追加したところ、スタイルが適用されず、ちょっと困りました。

index.htmlには適用されていたので、公式のセッティング方法を見直したところ、tailwind.config.cjsに、TailwindCSSを適用したいファイルのパスをすべて書く必要があるということがわかりました。

const th = document.createElement("th");
th.className = "border border-gray-400 px-4 py-2"; //この部分のTailwindCSSが適用されない

下記のようにtailwind.config.cjsを修正したところ、無事に適用されました!

contentに、TailwindCSSを使いたいファイルやディレクトリのパスを記述します。今回は、index.htmlと、srcディレクトリ全体で使いたいので、そちらのパスを書きました。

module.exports = {
  content: [
    "./src/**/*.{html,js}", //ここを追加
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

公式のViteでのセットアップ方法:https://tailwindcss.com/docs/guides/vite

VSCodeのプラグイン

VSCodeではTailwindCSSのクラス名の補完をしてくれるプラグインTailwind CSS IntelliSenseがあります。

ちなみに、JavaScriptでもクラス名の補完をしてほしい場合は、VSCodeのsetting.jsonに下記を追加すると、補完してくれるようになります。

設定した後は、一回VSCodeをリロードしてから確認。リロードしても補完が効かない場合は、一度tailwind.config.cjsを削除して再度作成してみてね、という案内も見かけました。

{
    "tailwindCSS.includeLanguages": {
      "javascript": "javascript",
      "html": "HTML"
    },
    "editor.quickSuggestions": {
      "strings": true
    },
    "css.validate": false,
    "editor.inlineSuggest.enabled": true
}

便利なプラグインもあって、至れり尽くせりですね。まだ、使い始めたばかりですが、少しずつ使いこなせるようにしていきたいと思います。

ViteでTailwindCSSを導入するハンズオンはこちら! by もりけん先生

https://kenjimorita.jp/tailwindcss-vite/

まい

Webサービス制作会社で、Wordpressのテーマ開発や2Dシミュレーターの開発、JavaScriptを使用したフロントエンド周りの実装を担当しています。 JavaScriptが好きです。 最近は、3D Model Configuratorの制作にチャレンジしています。

Tailwind CSSカテゴリの最新記事