Spring Boot + Thymeleafという構成で、CSSを書くときにTailwind.cssを使う方法を記載します

はじめに

この記事の内容は、ほぼこの記事の転記です
英語を読むのが面倒な方向けに書きました

前提

すでにSpring Bootを使用したプロジェクトの作成および、HTMLの記述は済んでいることを前提とします

この記事は、上記の作業が済んだ上で「TailwindでCSSを記述したい」となった時の行動を想定しています

導入方法

Tailwindをインストールし、初期設定を行う

以下のコマンドを実行する

npm init

npm i -D tailwindcss

npx tailwindcss init

Tailwindを適用するために、contentを以下のように書き換える

taiwind.config.js

module.exports = {
  content: ["./src/main/resources/templates/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

ルートディレクトリ配下にstylesディレクトリを作成し、以下のようにinput.cssを生成する

styles/input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

実際にCSSを当てる

HTMLにTailwindの記法で、CSSの定義を書き込む

tailwind.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Tailwind</title>
  <link rel="stylesheet" th:href="@{/css/main.css}" />
</head>
<body>
  <p class="text-blue-700">Tailwindを入れたよ！</p> <!-- text-blue-700はTailwindの記述 -->
</body>
</html>

以下のコマンドを実行し、HTMLの定義から、実際に反映するCSSが作成する

npx tailwindcss -i styles/input.css -o ./src/main/resources/static/css/main.css

これで、CSSが反映された状態になるので、あとは起動して見た目を確認するだけでOKです！

注意点

以下のように新しい定義を記載した際には、再度以下のコマンドを打ち込む必要があります

tailwind.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Tailwind</title>
  <link rel="stylesheet" th:href="@{/css/main.css}" />
</head>
<body>
  <p class="text-blue-700">Tailwindを入れたよ！</p>
　　　　<p class="text-green-500">内容を更新したよ！</p> <!-- 新しい記述 -->
</body>
</html>

npx tailwindcss -i styles/input.css -o ./src/main/resources/static/css/main.css

編集するたびにコマンドを打つのが面倒な場合、以下のコマンドを打てば、自動でCSSを生成し続けてくれます

npx tailwindcss -i styles/input.css -o ./src/main/resources/static/css/main.css --watch