🎉

【Tailwind和訳】GETTING STARTED/Installation

2021/10/23に公開

Tailwind CSS

tech

この記事について

この記事は、GETTING STARTED/Installationの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

インストール方法

Tailwind CSS をお客様のプロジェクトに導入する方法をご紹介します。

統合ガイド

Tailwind CSS のインストールは、使用している他のフレームワークやツールによって若干異なる場合がありますので、一般的な設定を網羅したガイドをまとめました。

Next.js

Next.js で Tailwind CSS をインストールする

Next.js のプロジェクトに Tailwind CSS を設置します。

プロジェクトの作成

Next.js のプロジェクトを作成していない場合は、まず新しい Next.js プロジェクトを作成します。最も一般的な方法は、Create Next App を使用することです。

npx create-next-app -e with-tailwindcss my-project
cd my-project

これにより、公式の Next.js のサンプルをもとに、Tailwind の設定が自動的に行われます。手動で Tailwind の設定を行いたい場合は、このガイドの残りの部分を続けてください。

Tailwind CSS の設定

Tailwind CSS を使用するには、Node.js 12.13.0 以降が必要です。

npm による Tailwind のインストール

npm を使用して、Tailwind とその仲間の依存関係をインストールします。

# Next.js v10以降をお使いの場合
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# Next.js v9以前のバージョンをお使いの場合
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Next.js v9 以前はまだ PostCSS 8 をサポートしていないので、上記のように Tailwind CSS v2.0 PostCSS 7 互換ビルドをとりあえずインストールする必要があります。

設定ファイルの作成

次に、tailwind.config.js と postcss.config.js ファイルを生成します。

npx tailwindcss init -p

これにより、プロジェクトのルートに最小限の tailwind.config.js ファイルが作成されます。

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Tailwind の設定については、設定ドキュメントで詳しく説明しています。
また、tailwindcss と autoprefixer がすでに設定されている postcss.config.js ファイルが作成されます。

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

他の PostCSS プラグインを使用する場合は、Tailwind と一緒に使用するための最適な方法の詳細について、プリプロセッサとしての PostCSS の使用に関するドキュメントをお読みください。

本番環境で使用しないスタイルを削除するように Tailwind を設定する

tailwind.config.js ファイルの中で purge オプションを設定し、すべてのページとコンポーネントのパスを指定して、Tailwind が本番ビルドで未使用のスタイルをツリーシェイクできるようにします。

  // tailwind.config.js
  module.exports = {
 -  purge: [],
 +  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

使用していないスタイルをツリーシェイクしてパフォーマンスを向上させる方法については、本番環境への最適化に関する別のガイドをお読みください。

CSS に Tailwind を組み込む

Next.js のプロジェクトで CSS に Tailwind を組み込む場合、2 つのアプローチがあります。

JS に Tailwind を直接取り込む

カスタム CSS の記述を予定していない場合は、pages/_app.js に Tailwind を直接インポートするのが最も早い方法です。

- import '../styles/globals.css'
+ import 'tailwindcss/tailwind.css'
  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
  }
  export default MyApp

これらを使用しない場合は、Next.js がデフォルトで作成する globals.css や Home.module.css などの CSS ファイルを削除しても問題ありません。また、コンポーネント内でこれらのファイルを参照しているものがあれば、同様に削除してください。

CSS に Tailwind を組み込む

Next.js がデフォルトで生成する ./styles/globals.css ファイルを開き、@tailwind ディレクティブを使って、Tailwind の base 、components 、utilities のスタイルを、元のファイルの内容と入れ替えてください。

// pages/_app.js
import "../styles/globals.css"
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

Tailwind は、ビルド時にこれらのディレクティブを、設定されたデザインシステムに基づいて生成されたすべてのスタイルと入れ替えます。
独自のカスタム CSS で Tailwind を拡張するためのベストプラクティスについては、ベーススタイルの追加、コンポーネントの抽出、および新しいユーティリティの追加に関するドキュメントをお読みください。
最後に、CSS ファイルが pages/_app.js コンポーネントにインポートされていることを確認します。

// pages/_app.js
import "../styles/globals.css"
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}
export default MyApp

デフォルトの globals.css とは異なるファイルを使用する場合は、適宜 import を更新してください。
これで完成です。これで、npm run dev を実行すると、Next.js プロジェクトで Tailwind CSS が使えるようになります。
次は、ユーティリティ・ファーストのワークフローについて学びます。

Vue 3 (Vite)

Vue 3 と Vite で Tailwind CSS をインストールする

Vue 3 と Vite のプロジェクトで Tailwind CSS を設定します。

プロジェクトの作成

Vite プロジェクトを作成していない場合は、新しい Vite プロジェクトを作成します。

npm init vite my-project
cd my-project

次に、Vite のフロントエンドの依存関係を npm でインストールします。

npm install

Tailwind CSS のセットアップ

Tailwind CSS は、Node.js 12.13.0 以上が必要です。

npm で Tailwind をインストール

npm を使って Tailwind とその仲間の依存関係をインストールします。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

設定ファイルの作成

次に、tailwind.config.js と postcss.config.js ファイルを生成します。

npx tailwindcss init -p

これにより、プロジェクトのルートに最小限の tailwind.config.js ファイルが作成されます。

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

本番環境で使用しないスタイルを削除するように Tailwind を設定する

tailwind.config.js ファイルの中で、purge オプションを設定し、すべてのページとコンポーネントのパスを指定して、Tailwind が本番ビルドで未使用のスタイルをツリーシェイクできるようにします。

// tailwind.config.js
  module.exports = {
 -  purge: [],
 +  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

CSS に Tailwind を組み込む

./src/index.css ファイルを作成し、@tailwind ディレクティブを使用して、Tailwind の base 、 conponents 、 utilities のスタイルを含め、元のファイルの内容を置き換えます。

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind は、ビルド時にこれらのディレクティブを、設定されたデザインシステムに基づいて生成されたすべてのスタイルと入れ替えます。

独自のカスタム CSS で Tailwind を拡張するためのベストプラクティスについては、ベーススタイルの追加、コンポーネントの抽出、および新しいユーティリティの追加に関するドキュメントをお読みください。

最後に、CSS ファイルが./src/main.js ファイルにインポートされていることを確認します。

// src/main.js
import { createApp } from "vue"
import App from "./App.vue"
import "./index.css"
createApp(App).mount("#app")

これで完成です。これで、npm run dev を実行すると、Tailwind CSS が Vue 3 や Vite プロジェクトで使えるようになります。

次は、ユーティリティーファーストのワークフローについて学びましょう。

Laravel

Laravel で Tailwind CSS をインストールする

Laravel プロジェクトに Tailwind CSS を設置する。

プロジェクトの作成

まだ Laravel プロジェクトがない場合は、新しい Laravel プロジェクトの作成から始めましょう。最も一般的な方法は、Laravel インストーラーを使用することです。

laravel new my-project
cd my-project

次に、npm を使って Laravel のフロントエンドの依存関係をインストールします。

npm install

Tailwind CSS のセットアップ

Tailwind CSS は、Node.js 12.13.0 以上が必要です。

npm による Tailwind のインストール

npm を使って Tailwind とそのピア依存関係をインストールします。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

設定ファイルの作成

次に、tailwind.config.js ファイルを生成します。

npx tailwindcss init

これにより、プロジェクトのルートに最小限の tailwind.config.js ファイルが作成されます。

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Tailwind の設定については、設定ドキュメントで詳しく説明しています。

本番環境で未使用のスタイルを削除するための Tailwind の設定

tailwind.config.jsファイルで、Blade テンプレートと JavaScript コンポーネントのすべてのパスをpurgeオプションに設定し、Tailwind が本番ビルドで未使用のスタイルをツリーシェイクできるようにします。

  // tailwind.config.js
  module.exports = {
 - purge: [],
 + purge: [
 +   './resources/**/*.blade.php',
 +   './resources/**/*.js',
 +   './resources/**/*.vue',
 + ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

使用されていないスタイルをツリーシェイクしてパフォーマンスを向上させる方法については、本番環境への最適化に関する別のガイドをお読みください。

Laravel Mix での Tailwind の設定

webpack.mix.jsに、postCSSプラグインとして tailwindcss を追加します。

// webpack.mix.js
mix
  .js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [+require("tailwindcss")])

CSS に Tailwind を含める

Laravel がデフォルトで生成する./resources/css/app.cssファイルを開き、@tailwind ディレクティブを使用して、Tailwind の base 、component 、utilities のスタイルを含め、元のファイルの内容を置き換えます。

/* ./resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind は、ビルド時にこれらのディレクティブを、設定されたデザインシステムに基づいて生成されたすべてのスタイルと入れ替えます。

独自のカスタム CSS で Tailwind を拡張するためのベストプラクティスについては、ベーススタイルの追加、コンポーネントの抽出、新しいユーティリティの追加に関するドキュメントをお読みください。

次に、Blade のメインレイアウト（一般的にはresources/views/layouts/app.blade.phpなど）にスタイルシートをインポートし、レスポンシブビューポートメタタグがまだない場合は追加します。

<!DOCTYPE html>
<head>
  <!-- ... --->
  +
  <meta charset="UTF-8" />
  +
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  +
  <link href="{{ asset('css/app.css') }}" rel="stylesheet" />
</head>
<!-- ... --->

これで完成です。これで、npm run watch、npm run dev又はnpm run prodを実行すると、Laravel Mix プロジェクトで Tailwind CSS が使用できるようになります。

次は、ユーティリティ・ファーストのワークフローについて学びましょう。

Nuxt.js

Nuxt.js で Tailwind CSS をインストールする

Nuxt.js のプロジェクトに Tailwind CSS を設置します。

プロジェクトの作成

まだ Nuxt.js プロジェクトがない場合は、新しい Nuxt.js プロジェクトを作成することから始めます。最も一般的な方法は、Create Nuxt App を使用することです。

npx create-nuxt-app my-project
cd my-project

Tailwind CSS のセットアップ

Tailwind CSS は、Node.js 12.13.0 以上が必要です。

npm で Tailwind をインストール

npmを使って、@nuxtjs/tailwindcssと、Tailwind とその仲間の依存関係をインストールします。

npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest

nuxt.config.jsファイルのbuildModulesセクションに@nuxtjs/tailwindcssモジュールを追加します。

// nuxt.config.js
export default {
  buildModules: ["@nuxtjs/tailwindcss"],
}

設定ファイルの作成

次に、tailwind.config.jsファイルを生成します。

npx tailwindcss init

これにより、プロジェクトのルートに最小限のtailwind.config.jsファイルが作成されます。

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Tailwind の設定については、設定ドキュメントで詳しく説明しています。

本番環境で未使用のスタイルを削除するための Tailwind の設定

tailwind.config.jsファイルの中で、パージオプションを設定し、すべてのページとコンポーネントへのパスを設定することで、Tailwind は本番ビルドで未使用のスタイルをツリーシェイクします。

 // tailwind.config.js
  module.exports = {
 - purge: [],
 + purge: [
 +   './components/**/*.{vue,js}',
 +   './layouts/**/*.vue',
 +   './pages/**/*.vue',
 +   './plugins/**/*.{js,ts}',
 +   './nuxt.config.{js,ts}',
 + ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

CSS に Tailwind を組み込む

Nuxt.js がデフォルトで生成する./assets/css/tailwind.cssファイルを開き、@tailwindディレクティブを使用して、Tailwind のbase、component、utilitiesのスタイルを含め、元のファイルの内容を置き換えます。

/* ./assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind は、ビルド時にこれらのディレクティブを、設定されたデザインシステムに基づいて生成されたすべてのスタイルと入れ替えます。

ベーススタイルの追加、コンポーネントの抽出、新しいユーティリティの追加については、独自のカスタム CSS で Tailwind を拡張するためのベストプラクティスについてのドキュメントをお読みください。

これで完成です。これで、npm run dev を実行すると、Nuxt.js のプロジェクトで Tailwind CSS を使用できるようになります。

次は、ユーティリティファーストのワークフローについて学びましょう。

Create React App

Create React App で Tailwind CSS をインストールする

Create React App のプロジェクトで Tailwind CSS を設置する。

プロジェクトの作成

まだ Create React App プロジェクトが設定されていない場合は、新しい Create React App プロジェクトを作成することから始めます。最も一般的な方法は Create React App を使用することです。

npx create-react-app my-project
cd my-project

Tailwind CSS のセットアップ

Tailwind CSS は、Node.js 12.13.0 以上が必要です。

npm で Tailwind をインストール

npmを使って、Tailwind とその仲間の依存関係をインストールします。

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Create React App はまだ PostCSS 8 をサポートしていないので、上記のようにとりあえず Tailwind CSS v2.0 の PostCSS 7 互換ビルドをインストールする必要があります。

CRACO のインストールと設定

Create React App では PostCSS の設定をネイティブに上書きすることができないので、Tailwind を設定できるようにするために CRACO もインストールする必要があります。

npm install @craco/craco

インストールが完了したら、package.jsonファイルのscriptsを更新して、eject以外のすべてのスクリプトでreact-scriptsの代わりにcracoを使うようにします。

{
  // ...
  "scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
    "eject": "react-scripts eject"
  }
}

次に、プロジェクトのルートに craco.config.js を作成し、PostCSS プラグインとして tailwindcss と autoprefixer を追加します。

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
}

他の PostCSS プラグインを使用する場合は、Tailwind と一緒に使用するための最適な方法の詳細について、「プリプロセッサとしての PostCSS の使用」のドキュメントをお読みください。

設定ファイルの作成

次に、tailwind.config.js ファイルを生成します。

npx tailwindcss-cli@latest init

これにより、プロジェクトのルートに最小限の tailwind.config.js ファイルが作成されます。

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Tailwind の設定については、設定ドキュメントで詳しく説明しています。

本番環境で未使用のスタイルを削除するための Tailwind の設定

tailwind.config.jsファイルの中で、すべてのコンポーネントへのパスでpurgeオプションを設定し、Tailwind が本番ビルドで未使用のスタイルをツリーシェイクできるようにします。

  // tailwind.config.js
  module.exports = {
 -  purge: [],
 +  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

CSS に Tailwind を含める

Create React App がデフォルトで生成する./src/index.cssファイルを開き、@tailwindディレクティブを使用して、Tailwind のbase、component、utilitiesのスタイルを含め、元のファイルの内容を置き換えます。

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind は、ビルド時にこれらのディレクティブを、設定されたデザインシステムに基づいて生成されたすべてのスタイルと入れ替えます。

最後に、CSS ファイルが./src/index.js ファイルにインポートされていることを確認してください。

  // src/index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
+ import './index.css';
  import App from './App';
  import reportWebVitals from './reportWebVitals';
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );
  // ...

これで完成です。これで、npm run startを実行すると、Tailwind CSS が Create React App プロジェクトで使用できるようになります。

次は、ユーティリティーファーストのワークフローについて学びましょう。

Gatsby

Gatsby で Tailwind CSS をインストールする

Gatsby プロジェクトに Tailwind CSS を設置する。

プロジェクトの作成

まだ Gatsby プロジェクトを作成していない場合は、まず新しい Gatsby プロジェクトを作成します。最も一般的な方法は、Gatsby CLI を使用することです。

gatsby new my-project
cd my-project

Tailwind CSS のセットアップ

Tailwind CSS は、Node.js 12.13.0 以上が必要です。

npm で Tailwind をインストール

npmを使って、gatsby-plugin-postcssと Tailwind およびその仲間の依存関係をインストールします。

npm install -D gatsby-plugin-postcss tailwindcss@latest postcss@latest autoprefixer@latest

設定ファイルの作成

次に、tailwind.config.jsとpostcss.config.jsファイルを生成します。

npx tailwindcss init -p

これにより、プロジェクトのルートに最小限のtailwind.config.jsファイルが作成されます。

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Tailwind の設定については、設定ドキュメントで詳しく説明しています。

また、tailwindcssとautoprefixerがすでに設定されているpostcss.config.jsファイルが作成されます。

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

本番環境で使用しないスタイルを削除するように Tailwind を設定する

tailwind.config.jsファイルの中で、purgeオプションを設定し、すべてのページとコンポーネントのパスを指定して、Tailwind が本番ビルドで未使用のスタイルをツリーシェイクできるようにします。

// tailwind.config.js
module.exports = {
- purge: [],
+ purge: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

使用していないスタイルをツリーシェイクしてパフォーマンスを向上させる方法については、本番環境への最適化をお読みください。

gatsby-plugin-postcss の有効化

gatsby-config.js ファイルの中で、postcss プラグインを有効にします。

  // gatsby-config.js
  module.exports = {
    /* Your site config here */
-  plugins: [],
+  plugins: ['gatsby-plugin-postcss'],
  }

CSS に Tailwind を組み込む

./src/styles/global.css ファイルを作成し、@tailwind ディレクティブを使用して、Tailwind のbase、component、utilitiesのスタイルを含め、元のファイルの内容を置き換えます。

/* ./src/styles/global.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind は、ビルド時にこれらのディレクティブを、設定されたデザインシステムに基づいて生成されたすべてのスタイルと入れ替えます。

最後に、プロジェクトのルートに./gatsby-browser.js ファイルがなければ作成し、CSS ファイルをインポートしてください。

// ./gatsby-browser.js
import "./src/styles/global.css"

Gatsby でのグローバル CSS ファイルの扱い方については、Gatsby ドキュメントのグローバルスタイルの使用をお読みください。

これで完成です。これで、gatsby develop を実行すると、Tailwind CSS が Gatsby プロジェクトで使用できるようになります。

次は、ユーティリティ・ファーストのワークフローについて学びましょう。

お気に入りのツールがリストにありませんか？私たちは常に新しいガイドを作成していますが、Tailwind CSS を PostCSS プラグインとしてインストールする手順に従えば、すぐにセットアップが完了します。

PostCSS プラグインとしての Tailwind CSS のインストール

Tailwind CSS をインストールするには、Node.js 12.13.0 以降が必要です。

Tailwind CSS のインストールには、Node.js 12.13.0 以上が必要ですが、PostCSS プラグインとしてインストールすることをお勧めします。最近のフレームワークでは PostCSS が採用されていますし、autoprefixer などの PostCSS プラグインを使用したことがある、あるいは現在使用しているという方も多いと思います。

PostCSS について聞いたことがなかったり、Sass のようなツールとどう違うのか気になる方は、PostCSS をプリプロセッサとして使うためのガイドを読んで入門してください。

また、PostCSS の設定をせずに Tailwind を使ってみたいという方は、Tailwind CLI の使い方をご覧ください。

npm による Tailwind のインストール

ほとんどのプロジェクトでは、Tailwind のカスタマイズ機能を利用するために、npm 経由で Tailwind とその仲間の依存関係をインストールすることになります。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Tailwind は、生成する CSS にベンダープレフィックスを自動的に付加しませんので、上の例のように autoprefixer をインストールして処理することをお勧めします。

古いバージョンの PostCSS に依存しているツールと Tailwind を連携させている場合、以下のようなエラーが表示される場合があります。

Error: PostCSS plugin tailwindcss requires PostCSS 8.

この場合は、代わりに PostCSS 7 互換ビルドをインストールしてください。

Tailwind を PostCSS プラグインとして追加する

tailwindcss と autoprefixer を PostCSS の設定に追加します。多くの場合、これはプロジェクトのルートにある postcss.config.js ファイルですが、.postcssrc ファイルや package.json ファイルの postcss キーでもよいでしょう。

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

使用しているツールで PostCSS プラグインがどこに設定されているかわからない場合は、そのツールのドキュメントを参照して、どこに設定すべきかを学ぶとよいでしょう。configure postcss {my tool}"で検索すれば、すぐに答えが見つかります。

他の PostCSS プラグインを使用している場合は、PostCSS をプリプロセッサとして使用するのドキュメントを読んで、Tailwind でそれらを注文するための最適な方法についての詳細を確認してください。

設定ファイルの作成

Tailwind のインストールをカスタマイズしたい場合は、tailwindcss npm パッケージのインストール時に含まれる Tailwind CLI ユーティリティを使用して、プロジェクト用の設定ファイルを生成します。

npx tailwindcss init

これにより、プロジェクトのルートに最小限の tailwind.config.js ファイルが作成されます。

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Tailwind の設定については、設定ドキュメントで詳しく説明しています。

CSS に Tailwind を組み込む

CSS ファイルを作成し、@tailwind ディレクティブを使って Tailwind のbase、component、utilitiesのスタイルを注入します。

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind は、ビルド時にこれらのディレクティブを、設定されたデザインシステムに基づいて生成されたすべてのスタイルと入れ替えます。

postcss-import（またはWebpacker for Rails のような、ボンネット内でそれを使用するツール）を使用している場合は、@tailwindディレクティブの代わりに私たちの import を使用して、独自の追加ファイルをインポートする際の問題を回避します。

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

React や Vue など、CSS ファイルの直接読み込みをサポートしている JavaScript フレームワークを使用している場合は、CSS ファイルの作成を省略し、代わりにtailwindcss/tailwind.cssを読み込むことで、これらのディレクティブがすべて配置されます。

// app.js
import "tailwindcss/tailwind.css"

CSS の構築

プロジェクトを実際に構築する方法は、使用しているツールによって異なります。フレームワークにnpm run devのようなコマンドが含まれていて、バックグラウンドで CSS をコンパイルする開発サーバーを起動している場合や、自分でwebpackを実行している場合、あるいはpostcss-cliを使ってpostcss styles.css -o compiled.cssのようなコマンドを実行している場合もあるでしょう。

すでに PostCSS に精通している方は、何をすべきか分かっていると思いますが、そうでない場合は、使用しているツールのドキュメントを参照してください。

本番環境用にビルドする場合は、ファイルサイズを最小にするために、使われていないクラスを削除するpurgeオプションを設定してください。

// tailwind.config.js
  module.exports = {
+  purge: [
+    './src/**/*.html',
+    './src/**/*.js',
+  ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  }

最高のパフォーマンスのために未使用のスタイルをツリーシェイクする方法については、本番環境への最適化に関する別のガイドをお読みください。

古いバージョンの PostCSS に依存しているツールと Tailwind を連携させている場合、CSS を構築しようとすると以下のようなエラーが表示されることがあります。

Error: PostCSS plugin tailwindcss requires PostCSS 8.

この場合には、代わりにPostCSS 7 互換ビルドに切り替えてください。

Tailwind CLI の使用について

Tailwind CSS は、Node.js 12.13.0 以上が必要です。

Tailwind CLI ツールを使えば、PostCSS の設定や Tailwind のインストールをせずに CSS を生成することができます。

npx は npm と一緒に自動的にインストールされるツールで、完全にコンパイルされた Tailwind の CSS ファイルを生成することができます。

npx tailwindcss -o tailwind.css

これにより、Tailwind のデフォルト設定に基づいて生成された tailwind.css というファイルが作成され、必要なベンダープレフィックスはautoprefixerを使って自動的に追加されます。

このファイルを他のスタイルシートと同じように HTML に取り込むことができます。

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/tailwind.css" rel="stylesheet" />
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

変更を監視する

--watch または -w フラグを使用すると、変更があったときにウォッチプロセスを開始して、CSS を自動的に再構築することができます。

npx tailwindcss -o tailwind.css --watch

カスタム CSS ファイルの使用

カスタム CSS を Tailwind が生成するデフォルトスタイルと一緒に処理したい場合は、通常の CSS ファイルを作成し、@tailwind ディレクティブを使用して、Tailwind のbaseスタイル、componentsスタイル、utilitiesスタイルを含めます。

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-600 text-white rounded;
  }
}

そして、CSS を構築する際に、そのファイルのパスを含めます。

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

Tailwind の上にカスタム CSS を追加する方法については、ベーススタイルの追加、コンポーネントの抽出、新しいユーティリティの追加をお読みください。

設定のカスタマイズ

Tailwind が生成するものをカスタマイズしたい場合は、Tailwind CLI ツールを使って tailwind.config.js ファイルを作成します。

npx tailwindcss init

これにより、プロジェクトのルートに最小限のtailwind.config.jsファイルが作成されます。

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

このファイルは、Tailwind CLI で CSS を構築する際に自動的に読み込まれます。

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

設定ファイルを別の場所に置いたり、別の名前にしたい場合は、CSS を構築する際に-cオプションを使って設定ファイルのパスを渡します。

npx tailwindcss -i ./src/tailwind.css -c ./.config/tailwind.config.js -o ./dist/tailwind.css

Tailwind の設定については、設定ドキュメントで詳しく説明しています。

オートプレフィックスの無効化

デフォルトでは、Tailwind CLI ツールは、必要なベンダープレフィックスを追加するために、CSS をAutoprefixerに通します。ビルドパイプラインのどこかですでに Autoprefixer が設定されている場合は、Tailwind CLI ツールで--no-autoprefixerフラグを使用してこれを無効にし、2 回実行するのを避けることができます。

npx tailwindcss --no-autoprefixer -o tailwind.css

カスタム PostCSS 設定の使用

Tailwind と一緒に他の PostCSS プラグインを使用したい場合は、プロジェクトルートにpostcss.config.jsファイルを作成し、追加のプラグインを追加することで、CSS を構築する際に--postcssフラグを使用すると Tailwind がそれらを含めます。

npx tailwindcss --postcss -o tailwind.css

// postcss.config.js
module.exports = {
  plugins: [require("postcss-100vh-fix")],
}

デフォルトでは、プラグインは Tailwind が CSS を生成した後に適用されます。Tailwind の前に実行する必要があるプラグインがある場合は、プラグインリストに tailwindcss を含めるだけで、Tailwind CLI がそれを検出し、カスタムプラグインオーダーを尊重します。

// postcss.config.js
module.exports = {
  plugins: [require("postcss-import"), require("tailwindcss"), require("postcss-100vh-fix")],
}

tailwind.config.jsファイルの作成時に、基本的なpostcss.config.jsファイルを自動的に生成したい場合は、設定ファイルの初期化時に--postcssまたは-pフラグを使用します。

npx tailwindcss init --postcss

本番環境の構築

本番環境で構築する場合、CSS を構築する際にコマンドラインでNODE_ENV=productionを設定します。

NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

これにより、Tailwind が使用されていない CSS を削除し、最高のパフォーマンスを実現します。詳しくは、本番環境への最適化についての別冊ガイドをお読みください。

また、--minify フラグを使用して、cssnanoで CSS を圧縮することもできます。

NODE_ENV=production npx tailwindcss -i ./src/tailwind.css -o ./dist/tailw

CDN による Tailwind の利用

CDN ビルドをご利用いただく前に、Tailwind CSS の優れた機能の多くは、Tailwind をビルドプロセスに組み込まないと利用できないことにご注意ください。

❌ 　 Tailwind のデフォルトテーマをカスタマイズすることができません。
❌ 　@apply、@variantsなどのディレクティブを使用できません。
❌ 　group-focusのような追加バリアントを有効にすることはできません。
❌ 　サードパーティ製のプラグインをインストールすることはできません。
❌ 　未使用のスタイルをツリーシェイクすることはできません。
❌ 　 Tailwind を最大限に活用するには、PostCSS プラグインとしてインストールすることをお勧めします。

Tailwind を最大限に活用するには、PostCSS プラグインとしてインストールする必要があります。

Tailwind のクイックデモやフレームワークの試用のために Tailwind を導入するには、CDN 経由で最新のデフォルト設定のビルドを入手してください。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />

CDN 経由のビルドはサイズが大きいですが（圧縮時 71.3kB、未加工時 2872.2kB）、Tailwind をビルドプロセスの一部として組み込んだ場合に表示されるサイズを代表するものではありません。

私たちのベストプラクティスに従ったサイトは、ほとんどの場合、圧縮しても 10kb 以下です。

HTML スターターテンプレート

Tailwind のスタイルが期待通りに機能するためには、HTML5 の doctype を使用し、レスポンシブスタイルをすべてのデバイスで適切に処理するために、レスポンシブビューポートメタタグを含める必要があります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/path/to/tailwind.css" rel="stylesheet" />
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Next.js や vue-cli などの多くのフロントエンドフレームワークは、舞台裏でこれらのことを自動的に行ってくれるので、あなたが作るものによっては、この設定は必要ないかもしれません。

PostCSS 7 互換ビルド

v2.0 の時点で、Tailwind CSS は PostCSS 8 に依存しています。そのため、Tailwind をインストールして CSS をコンパイルしようとすると、ターミナルに以下のようなエラーが表示されることがあります。

Error: PostCSS plugin tailwindcss requires PostCSS 8.

皆さまがアップデートされるまでの間のギャップを埋めるために、PostCSS 7 の互換ビルドを@tailwindcss/postcss7-compatとして npm で公開しています。

もし上記のようなエラーが発生した場合は、Tailwind をアンインストールして、互換ビルドを使って再インストールしてください。

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

互換ビルドは、すべての面でメインビルドと同じなので、機能が不足しているなどということはありません。

他のツールに PostCSS 8 のサポートが追加されたら、lstestのタグを使って Tailwind とその仲間の依存関係を再インストールすることで、互換ビルドから移行することができます。

npm uninstall tailwindcss
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

リリースノート

Discussion

ログインするとコメントできます