👨‍🎨

TailWindCSSを環境構築してハマった!

2022/08/18に公開

npm

Tailwind CSS

tech

distフォルダのcssを読み込んでいない?

久しぶりに、TailWindCSSの環境構築をやってみたのですが、styleが適用されていないのに気づいた!
原因は何かというと相対パスが違ったことが、原因でした!

<!--公式ドキュメントとパスの場所が違う!-->
  <!--[相対パスは、../dist/]-->
  <!--[ドキュメントの、/dist/output.cssだと読み込めない!]-->
  <link href="../dist/output.css" rel="stylesheet">

作成したプロジェクトをGithubで公開しています。

公式ドキュメントを参考に環境構築をして、チュートリアルをやってみようと思います。

環境構築の仕方

公式ドキュメント

TailWind CLIで環境構築を行う

プロジェクトフォルダでコマンドを順番に実行する

package.jsonを生成

npm install -D tailwindcss

tailwindの設定に必要なファイルを生成

npx tailwindcss init

tailwind.config.jsに貼り付けるコード

//公式のをそのままコピーして使う
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

CSS に Tailwind ディレクティブを追加する

srcフォルダを作成して、input.cssファイルを作成して、
ドキュメントのコードをコピーして使う

Tailwind CLI ビルドプロセスを開始する

styleを追加するたびに、watchで監視されているので、自動でCSSのstyleをoutput.cssに追加していく。

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

buildを簡単に行えるように設定をする。package.jsonを生成するファイルを入力する
既に存在するファイルに設定が追加される

毎回、4番のコマンドを打ち込むのはめんどくさい!

npm init -y

package.jsonに設定を追加する

"test"の下に"build"のscriptsを追加する。

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
  },

buildできる設定をpackage.jsonに追加したら、こちらのコマンドを実行する。

npm run build

srcフォルダに、index.htmlファイルを用意する

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--公式ドキュメントとパスの場所が違う!-->
  <!--[相対パスは、../dist/]-->
  <!--[ドキュメントの、/dist/output.cssだと読み込めない!]-->
  <link href="../dist/output.css" rel="stylesheet">
  <title>TailWindCSS</title>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
  <h2 class="bg-stone-600">
    BackGroud Green!
  </h2>
  <p class="text-red-400">
    TailWindCSSのチュートリアルをやってみたが、ドキュメントが親切ではない😅<br>
    もっとわかりやすくしてくれ!
  </p>
</body>
</html>

スクリーンショット

最後に

Udemyの講座で久しぶりに勉強してみたのですが、grid、FlexBOX、Z-indexといったCSSの知識がないとわかりませんでしたが、ある程度分かればTailWindCSSも理解することはできると思われます。
CSSの学習で参考になった書籍もご紹介いたします。