Zenn
🌺

【Tailwind CSS実践入門の本を読んで --> 動かして学ぶシリーズにしてみた】

2024/03/28に公開
CSS
React
TypeScript
Tailwind CSS
idea

【Tailwind CSS実践入門の本を読んで --> 動かして学ぶシリーズにしてみた】

第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を作成
server.js
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}`);
});
public/index.html
<html>
 <head>
   <title>Top Page</title>
 </head>
 <body>
   <h1>Top Page</h1>
 </body>
</html>

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

  • tailwind.cssを作成
tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  • build-css.js作成(tailwind.cssからpublic/styles.cssを作る)
build-css.js
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のリンク追加
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',}を追加
tailwind.config.js
/** @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を書き換える (他の設定変更は何も要らない)
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 (
    <div>
      <Head>
        <title>{title}</title>
      </Head>

      <h1 className="bg-primary text-white text-4xl py-4 px-6">React</h1>
      <div className="container mx-auto">
        <p className="my-3 text-center text-4xl font-bold">{title}</p>
        <div className="alert alert-primary text-center">
          <p className="text-xl">{message}.</p>
        </div>
      </div>
    </div>
  );
}

第3章-3 設定ファイルを書く

【作成環境A】を使って説明

    • Windows 11
    • Node.js
    • Express
    • Tailwind CSS
  • //---bad theme:extend:無しは以下3色で他の色が使えなくなるので注意
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: [],
}
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>
  <!-- カスタムカラーパレットから色を使った例 -->
  <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色以外も使える
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './public/**/*.html',
  ],
  theme: {
    extend: {
      colors: {//---good theme:extend:で以下3色以外も使える
        primary: '#0000ff',
        secondary: '#eeeeee',
        warning: '#ff0000',
      },
    },
  },
  plugins: [],
}
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>
  <!-- カスタムカラーパレットから色を使った例 -->
  <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を使った例 bg-mypurple
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './public/**/*.html',
  ],
  theme: {
    extend: {
      colors: {//---good 自作Tailwind CSSのクラスmypurpleを使った例
        transparent: "transparent",
        current: 'currentColor',
        mypurple: '#3f3cbb',
      },
    },
  },
  plugins: [],
}
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>
    <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を作る
tailwind.config.js
/** @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: [],
}
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>
    <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>
  • 続きは後日

Discussion