tailwindcssメリット、デメリット

メリット

  • class名を付与する必要がない

デメリット

  • 事前にビルドの設定が必要

導入方法

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

ユーティリティクラスを使うファイルのパスを指定

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;
}
素材をダウンロード