tailwindcss使い方
更新日:2024/03/13

tailwindcssメリット、デメリット
メリット
- class名を付与する必要がない
デメリット
- 事前にビルドの設定が必要
導入方法
- npm経由でインストール
- CDNを利用
https://tailwindcss.com/docs/installation/play-cdn- scriptタグ1行コピーでOK
- CSSファイルの容量が大きく運用には向いていない
npm(Node Package Manager)経由でインストール
参考:https://logical-studio.com/develop/frontend/20220401-tailwindcss/#Tailwind_CSS_v3
・プロジェクトフォルダにて(tailwindcss_testフォルダ)
初期化実施
npm init -y
▼tailwindcss-test/package.jsonが作成されます
{
"name": "tailwindcss-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Tailwind CSSをPostCSSプラグインとして導入するため、tailwind CSSに加えPostCSSもインストール
ビルド時にpostcssコマンドを使うため、postcss-cliをインストール
npm install -D tailwindcss postcss-cli autoprefixer
Tailwind CSSとPostCSSのコンフィグファイルを生成
npx tailwindcss init -p
必要なディレクトリを作成
- tailwindcss_test
- dist
- output.css
- src
- index.html
- input.css
- dist
ユーティリティクラスを使うファイルのパスを指定
tailwind.config.jsを編集
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
ディレクティブの情報をinput.cssに入力
@tailwind base;
@tailwind components;
@tailwind utilities;
ビルドコマンドの設定
{
"name": "tailwindcss_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "postcss ./src/input.css -o ./dist/output.css --watch --verbose"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.17",
"postcss-cli": "^11.0.0",
"tailwindcss": "^3.4.1"
}
}
npm run dev
コマンドを実行
→output.cssにTailwind CSSの雛形が生成
watchコマンドが走っているため、ユーティリティクラスを追加すると自動でそのCSSが生成されます。
実際にindex.htmlを編集して試してみます
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="../dist/output.css" rel="stylesheet" />
</head>
<body>
<h1 class="text-3xl font-bold underline text-blue-600">Hello world!</h1>
</body>
</html>
→正しくoutput.cssに追記されます
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.font-bold {
font-weight: 700;
}
.text-blue-600 {
--tw-text-opacity: 1;
color: rgb(37 99 235 / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}

-
検索
(例) debug search etc.. -
カテゴリー
-
Windows↔️Macで文字化けしたZIPファイルを解決する方法【7-Zip活用ガイド】
更新日:2025/02/18
-
本番環境 / ステージング環境 でのGitブランチ切り替え方法と注意点 Note: witching to ‘origin/new_feature’. You are in ‘detached HEAD’ state…
更新日:2025/02/16
-
複数のWordPressサイトをまとめて検索・管理するには?
更新日:2025/02/16
-
【WordPress】SVGを投稿記事のサムネイルに!自作プラグイン(未実装🤷♂️)「nonce(ナンス)トークン」wp_postmetaテーブルを利用
更新日:2025/02/14
-
【WordPress】カスタムフィールド作成の仕方「ACF」Advanced Custom Fieldsの使用法
更新日:2024/06/10
298 view
-
mixhostでのWordPress利用について
更新日:2024/04/02
295 view
-
scrollHint
更新日:2024/03/13
246 view
-
LOLIPOPでWordPressインストール(サブディレクトリにインストールしたWordPressをドメイン直下で表示)
更新日:2024/06/13
235 view
-
XML Sitemap Generator for Google不具合のダウングレード対応、代替プラグイン
更新日:2024/06/13
234 view
-
Sass導入方法
更新日:2024/03/13
206 view
-
【SnowMonkey】納品までのフローまとめ
更新日:2025/02/15
163 view
-
【Snow Monkey】Googleサーチコンソール登録
更新日:2024/05/28
157 view
-
ワードプレスでフォントを変えたいとき、プラグインを使えば初心者でも簡単
更新日:2025/02/16
144 view
-
【Googleサーチコンソール】検索画面で表示させたくない「Googleのインデックス削除」
更新日:2024/06/07
129 view
-
【ショートコード】編集画面で任意の場所にHTMLファイルを挿入
更新日:2024/01/26
122 view
-
tailwindcss使い方
更新日:2024/03/13
119 view
-
キーワード検索で上位表示させる方法【SEO】
更新日:2023/10/28
119 view
-
Recline: GitHub Copilotで動作するClaude 3.5 Sonnet搭載の開発支援ツール
更新日:2025/01/20
105 view
-
WordPressプラグイン「All-in-One WP Migration」のトラブル
更新日:2022/03/31
83 view
-
【2022年】WordPressセキュリティー対策おすすめプラグイン2選
更新日:2022/02/21
70 view
-
【必須】ワードプレスセキュリティー対策まとめ【2022年】
更新日:2025/02/16
69 view
-
「THE THOR」を半年使ってみて、レビュー【メリット・デメリット】
更新日:2025/02/16
45 view
-
SSHを使用してGitHubのリポジトリをクローン、複数の接続元で公開鍵をディレクトリで区別する方法
更新日:2025/01/13
43 view
-
VSCodeで開発効率を劇的に向上させる!Roo-Clineプラグイン完全ガイド【Gemini API】
更新日:2025/02/08
41 view
-
「JSONスキーマ」と「Few-shot Learning」で実現する次世代生成AIソフトウェア開発の可能性
更新日:2025/02/12
40 view
-
THE THOR(ザ・トール)でグーグルアドセンスを使う
更新日:2025/02/16
39 view
-
WordPressの無料画像素材のおすすめダウンロードサイト!
更新日:2022/02/22
35 view
-
リファクタリング【VSCode Javasctipt Python】
更新日:2025/02/06
34 view
-
形態素解析とは?初心者でもわかるツールの使い方と実践例
更新日:2025/02/08
33 view
-
【Next.js AWS】音声文字起こし&要約、分析アプリケーション(S3)(Transcribe)(Amazon Bedrock)
更新日:2025/02/13
28 view
-
VSCodeプラグイン「 Pretter – Code formatter」「PHP Intelephense 」
更新日:2025/01/06
26 view
-
【CSS JavaScript サンプルコード】アコーディオン 続きを読む(Read more)Toggle 折りたたみコンテンツ
更新日:2025/02/05
23 view
-
【WordPress】SVGを投稿記事のサムネイルに!自作プラグイン(未実装🤷♂️)「nonce(ナンス)トークン」wp_postmetaテーブルを利用
更新日:2025/02/16
22 view
-
【WordPressプラグイン】人気記事 管理 WordPress Popular Posts 実践的なカスタマイズ
更新日:2025/02/15
22 view
-
Googleアドセンスとは?〜前編〜
更新日:2025/02/16
22 view
-
【WordPress】プラグイン不使用でカスタムタクソノミーを設定、絞り込み検索について
更新日:2025/01/26
18 view
-
スマートフォンファーストのWeb開発実践ガイド
更新日:2025/01/23
16 view
-
WordPressでカスタムフィールドを使った記事のスコアリングシステムの実装
更新日:2025/01/27
15 view
-
AWSのOCRサービス完全ガイド:Textract、Rekognition、Comprehendの使い分け
更新日:2025/02/09
14 view