Zenn
📝

TailwindCSSを使ってみる

2023/08/02に公開
shu98
tech

概要

TailwindCSSを学び始めたので、まとめていこうと思います。
(学習記録です。)

公式

https://tailwindcss.com/

TailwindCSSとは

CSSフレームワーク。

HTMLファイル内でCSSを記述するため、クラス名を考えなくても良い。

前提

Node.jsがインストール済み
yarnがインストール済み

開発環境構築

  1. TailwindCSSのインストール
    npm install -D tailwindcss

  2. セットアップ
    npx tailwindcss init

  3. TailwindCSSの設定ファイルを編集
    vi tailwind.config.js
    ↓

module.exports = {
  content: ["./src/**/*.{html,js}"], // この部分
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. CSSファイルにTailwindCSSを導入
    vi src/input.css
    ↓
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. ビルド
    npm init -y

vi package.json
↓

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
  }
}

npm run build

TailwindCSSを実行する

vi src/index.html
↓

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TailwindCSS</title>
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-base font-bold underline">
    Hello world!
  </h1>
</body>
</html>

VSCodeでプラグインを追加する

Tailwind CSS IntelliSense

Discussion