【Tailwind CSS実践入門 --> 動かして学ぶシリーズにしてみた】

本 https://gihyo.jp/book/2024/978-4-297-13943-8
サンプルコード https://github.com/fsubal/gihyo_tailwindcss_book/blob/main/README.md

第3章 Tailwind CSSをインストールする

-- ここで初学者は倒れて立ち上がれない気がするので動かして学ぶシリーズにしてみた

【作成環境A】

- Windows 11
- Node.js
- Express
- Tailwind CSS
  
  ミッション1))Expressを立ち上げる
nodeをインストール"https://nodejs.org/en/download"
node環境チェック --> "node -v"
Expressフレームワーク環境作成 "cd your_dir" "npm init -y" #package.json作成
"npm install express --save" #Expressをインストール後package.jsonに記載される

server.jsとpublic/index.htmlを作成


const express = require("express");
const app = express();
const port = 3000;

app.use(express.static("public"));

app.get("/", (req, res, next) => { res.end("Top Page"); });

app.listen(port, () => { console.log(Server is running on http://localhost:${port}); });

 ```html:public/index.html
<html>
  <head>
    <title>Top Page</title>
  </head>
  <body>
    <h1>Top Page</h1>
  </body>
</html>

"node .\server.js"実行 -> 動作確認"http://localhost:3000"
ミッション2))ExpressでTailwind CSSの環境をつくる

tailwind.cssを作成

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

build-css.js作成(tailwind.cssからpublic/styles.cssを作る)


const fs = require('fs');
const util = require('util');
const exec = util.promisify(require('child_process').exec);

async function build() { try { const { stdout, stderr } = await exec('npx tailwindcss build tailwind.css -o public/styles.css'); console.log('stdout:', stdout); console.error('stderr:', stderr); } catch (err) { console.error(err); } } build();

- htmlヘッダにpublic/styles.cssのリンク追加
```html:public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Top Page</title>
  <link href="/styles.css" rel="stylesheet">
</head>
<body>
  <h1 class="font-sans text-2xl text-blue-800 border-b-2 border-yellow-200 mb-6">Top Page</h1>
</body>
</html>

"npm install tailwindcss"
"npx tailwindcss init" #tailwind.config.jsができます。 tailwind.config.jsの修正

content: ['./public/*/.html',}を追加

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

"node build-css.js"実行でpublic/styles.cssが作成される
"node server.js"実行 --> 動作確認 "http://localhost:3000"

【作成環境B】

- Windows 11
- Node.js
- Nextjs
- Tailwind CSS
- TypeScript
Next.js環境構築(全部OK盛り) "npx create-next-app my-tailwind-app"実行。 Tailwind CSSとTypeScriptを入れるか聞いてくれる時代突入(全部yesでOK)
app/page.tsxを書き換える (他の設定変更は何も要らない)
```
import Head from 'next/head';
```

export default function Home() { const title = "Next.js page"; const message = "React Next.js sample page.";

return (

{title}

React

{title}

{message}.

); }

- "npm run build" "npm run dev"で実行 動作確認 "http://localhost:3000"
## 第3章-3 設定ファイルを書く
【作成環境A】を使って説明
--------------------
- - Windows 11 
- - Node.js
- - Express
- - Tailwind CSS
---------------------
- //---bad theme:extend:無しは以下3色で他の色が使えなくなるので注意

```js:tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './public/**/*.html',
  ],
  theme: {
      colors: {//---bad theme:extend:無しは以下3色しか使えなくなる
        primary: '#0000ff',
        secondary: '#eeeeee',
        warning: '#ff0000',
      },
  },
  plugins: [],
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Top Page</title>
  <link href="/styles.css" rel="stylesheet">
</head>
<body>
  <!-- カスタムカラーパレットから色を使った例 -->
  <div class="bg-primary text-secondary p-4">
    <p>This is a primary colored div with secondary text.</p>
  </div>
  <!-- 他のTailwind CSSのクラスを使った例 -->
  <button class="bg-blue-300 text-white px-4 py-2 rounded">Warning Button</button>
</body>
</html>

//---good theme:extend:で以下3色以外も使える

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./public/**/*.html',
],
theme: {
extend: {
  colors: {//---good theme:extend:で以下3色以外も使える
    primary: '#0000ff',
    secondary: '#eeeeee',
    warning: '#ff0000',
  },
},
},
plugins: [],
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Top Page</title>
<link href="/styles.css" rel="stylesheet">
</head>
<body>
<!-- カスタムカラーパレットから色を使った例 -->
<div class="bg-primary text-secondary p-4">
<p>This is a primary colored div with secondary text.</p>
</div>
<!-- 他のTailwind CSSのクラスを使った例 -->
<button class="bg-blue-300 text-white px-4 py-2 rounded">Warning Button</button>
</body>
</html>

自作Tailwind CSSのクラスmypurpleを使った例

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./public/**/*.html',
],
theme: {
extend: {
  colors: {//---good 自作Tailwind CSSのクラスmypurpleを使った例
    transparent: "transparent",
    current: 'currentColor',
    mypurple: '#3f3cbb',
  },
},
},
plugins: [],
}

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Top Page</title>
<link href="/styles.css" rel="stylesheet" />
</head>
<body>
<div class="text-secondary bg-blue-300 p-4">
  <p>This is a primary colored div with secondary text.</p>
</div>
<!-- 自作Tailwind CSSのクラスmypurpleを使った例 -->
<button class="rounded bg-mypurple px-4 py-2 text-white">
  Warning Button
</button>
</body>
</html>

濃さの追加をしたい --> bg-mypurple-100 ~ 900を作る

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./public/**/*.html',
],
theme: {
extend: {
  colors: {//---good theme:extend:で以下3色以外も使える
    transparent: "transparent",
    current: 'currentColor',
    mypurple: { //bg-mypurple-300 --> ２段ネストまでOK
      100: '#cffafa',
      200: '#a5f3fc',
      300: '#67e8f9',
      400: '#22d3ee',
      500: '#06b6d4',
      600: '#0891b2',
      700: '#0e7490',
      800: '#155e75',
      900: '#164e63',
      DEFAULT: '#06b6d4',
    },
  },
},
},
plugins: [],
}

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Top Page</title>
<link href="/styles.css" rel="stylesheet" />
</head>
<body>
<div class="text-secondary bg-blue-300 p-4">
  <p>This is a primary colored div with secondary text.</p>
</div>
<!-- 自作Tailwind CSSのクラスmypurpleを使った例 -->
<button class="bg-mypurple-300 rounded px-4 py-2 text-white">
  Warning Button
</button>
</body>
</html>

続きは後日

maitakedayo / Issue-fosterparents

tailwindcss_zenn #6

【Tailwind CSS実践入門 --> 動かして学ぶシリーズにしてみた】

第3章 Tailwind CSSをインストールする

【作成環境A】

Tailwind CSS

ミッション1))Expressを立ち上げる

ミッション2))ExpressでTailwind CSSの環境をつくる

【作成環境B】

TypeScript

React