TailwindCSS を試す Windows環境

2023.03.08
DEVELOP

1. Windows 環境でTailwindCSS試行したメモ
2. 感想）tailwindcssの良い点・悪い点

Windows 環境でTailwindCSS試行したメモ

今回お試し用のディレクトリ作成

C:￥work￥lesson￥tailwindCSS￥2

対象ディレクトリへ移動

cd …￥tailwindCSS￥2

まず、package.jsonを作成する

npm init -y
→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"
}

tailwindcssを使うため下記コマンドを実行

npm install tailwindcss
→package-lock.json、node_modulesフォルダ 出力される

CSSの事前準備

配下に「src」フォルダを作成し style.css 作成する。内容は、

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

ビルド設定を package.json の scripts 部分に以下のように記述

…
"scripts": {
"build-css": "tailwindcss build src/style.css -o dist/style.css"
},
…

上記を設定後、名前を「build-css」とする

srcフォルダのcssをビルドし「dist」フォルダ内にstyle.cssファイルを出力する

npm run build-css

→distフォルダが生成されてその中にtailwindcssが記述されたstyle.cssファイルが生成される

tailwindcssを実際に使ってみる

distフォルダに「index.html」ファイルを作成する

tailwindcssを拡張してみる

拡張するため「tailwind.config.js」というファイルを生成する
npx tailwind init

tailwind.config.js に下記のように追記

…
content: ["./dist/*/.{html,js}"],
…

npm run build-css
→dist 配下の index.html 記述を見ながら style.css に必要項目のみ出力してくれる

結果

http://localhost/2/dist/

ディレクトリ構成、使用したファイル

srcがinput、distがoutput。npm run build-css 実行で「dist￥index.html見ながらdist￥style.cssを出力」

dist￥index.html

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <title>TailwindCSS</title>
</head>
<body>
  <h1 class="text-9xl text-center pt-10">Hello TailwindCSS</h1>
    
  <button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">ボタン</button>


  <h1 class="text-4xl text-green-700 text-center font-semibold">Hello Tailwind</h1>
  
  <div class="text-center mt-10">
    <p class="text-xs">fontの大きさ</p>
    <p class="text-sm">fontの大きさ</p>
    <p class="text-base">fontの大きさ</p>
    <p class="text-lg">fontの大きさ</p>
    <p class="text-xl">fontの大きさ</p>
    <p class="text-2xl">fontの大きさ</p>
    <p class="text-3xl">fontの大きさ</p>
    <p class="text-4xl">fontの大きさ</p>
    <p class="text-5xl">fontの大きさ</p>
    <p class="text-6xl">fontの大きさ</p>
  </div>
  <div class="text-center mt-10">
    <p class="font-thin">fontの太さ</p>
    <p class="font-extralight">fontの太さ</p>
    <p class="font-light">fontの太さ</p>
    <p class="font-normal">fontの太さ</p>
    <p class="font-medium">fontの太さ</p>
    <p class="font-semibold">fontの太さ</p>
    <p class="font-bold">fontの太さ</p>
    <p class="font-extrabold">fontの太さ</p>
    <p class="font-black">fontの太さ</p>
  </div>
  <div class="text-center mt-10">
    <p class="text-green-100">fontの色</p>
    <p class="text-green-200">fontの色</p>
    <p class="text-green-300">fontの色</p>
    <p class="text-green-400">fontの色</p>
    <p class="text-green-500">fontの色</p>
    <p class="text-green-600">fontの色</p>
    <p class="text-green-700">fontの色</p>
    <p class="text-green-800">fontの色</p>
    <p class="text-green-900">fontの色</p>
  </div>

</body>
</html>

dist￥style.css（一部）

/*
! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

...

.mt-10 {
  margin-top: 2.5rem;
}

.rounded {
  border-radius: 0.25rem;
}

.bg-indigo-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.text-center {
  text-align: center;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-9xl {
  font-size: 8rem;
  line-height: 1;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-black {
  font-weight: 900;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.font-thin {
  font-weight: 100;
}

.text-green-100 {
  --tw-text-opacity: 1;
  color: rgb(220 252 231 / var(--tw-text-opacity));
}

.text-green-200 {
  --tw-text-opacity: 1;
  color: rgb(187 247 208 / var(--tw-text-opacity));
}

.text-green-300 {
  --tw-text-opacity: 1;
  color: rgb(134 239 172 / var(--tw-text-opacity));
}

.text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(74 222 128 / var(--tw-text-opacity));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
}

.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./dist/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

package.json

{
  "name": "2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build-css": "tailwindcss build src/style.css -o dist/style.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "tailwindcss": "^3.2.7"
  }
}

感想）tailwindcssの良い点・悪い点

記述が減る
コードが明解
再利用が楽
細かい設定ができない
記述方法に慣れるまで時間かかる
複雑なデザインに対応困難

前の記事

Windows React インストール 2023.01.26
次の記事

さくらレンタルサーバー Laravel エラー：Composer detected issues in your platform: Your Composer dependencies require a PHP version “>= 8.0.2”. 2023.03.18