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