Tailwind CSSドキュメント日本語訳

  • はじめに
    • インストール
    • エディターの設定
    • CSSプリプロセッサーの使用
    • 本番環境に向けた最適化
    • ブラウザのサポート
    • アップグレードガイド

Tailwind CSSを使い始める

Tailwind CSS は、すべての HTML ファイル、JavaScript コンポーネント、およびその他のテンプレートでクラス名を検索し、 対応するスタイルを生成してそれらを静的 CSS ファイルに書き込むことで機能します。

高速で柔軟で信頼性が高く、実行時のオーバーヘッドはありません

インストール

Tailwind CSS をゼロから起動して実行する最も簡単で最速の方法は、Tailwind CLI ツールを使用することです。 Node.js をインストールせずに CLI を使用したい場合は、スタンドアロン実行可能ファイルとしても利用できます。

  1. Tailwind CSSをインストールする

    npm 経由でtailwindcss をインストールし、tailwind.config.jsファイルを作成します。

    Terminal
    npm install -D tailwindcss
npx tailwindcss init

  2. テンプレートパスを設定する

    tailwind.config.jsファイルにすべてのテンプレートファイルへのパスを追加します。

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

  3. TailwindディレクティブをCSSに追加する

    メインの CSS ファイルに、Tailwind の各レイヤーの@tailwindディレクティブを追加します。

    src/input.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  4. Tailwind CLIのビルドプロセスを開始する

    CLI ツールを実行してテンプレートファイルでクラスを検索してCSSをビルドします。

    Terminal
    npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

  5. HTMLでTailwindを使い始める

    コンパイルされた CSS ファイルを<head>に追加し、Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定します。

    src/index.html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Get started with Tailwind CSS

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It's fast, flexible, and reliable — with zero-runtime.

Installation

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.

  1. Install Tailwind CSS

    Install tailwindcss via npm, and create your tailwind.config.js file.

    Terminal
    npm install -D tailwindcss
npx tailwindcss init

  2. Configure your template paths

    Add the paths to all of your template files in your tailwind.config.js file.

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

  3. Add the Tailwind directives to your CSS

    Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

    src/input.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  4. Start the Tailwind CLI build process

    Run the CLI tool to scan your template files for classes and build your CSS.

    Terminal
    npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

  5. Start using Tailwind in your HTML

    Add your compiled CSS file to the <head> and start using Tailwind's utility classes to style your content.

    src/index.html
    <!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

注意事項

  • 本サイトはTailwind CSSのサイトを翻訳したものであり、Tailwind CSSに関する著作権は全てそちらに帰属しています。
  • 本サイトは現在翻訳中のため、未翻訳の項目が存在します。
  • 誤訳が判明した場合、より分かりやすい言い回しが見つかった場合、原文が変更された場合などにより、本サイトの内容は予告なく変更されることがあります。
  • 翻訳の内容には誤りがある可能性があります。本サイトの記述内容によって不利益が発生した場合も、サイト管理人は一切の責任を負いません。