インストール

TailwindCSSをインストールおよび構成するためのクイックスタートガイド。


1npm経由でTailwindをインストールする

ほとんどのプロジェクトでは(そしてTailwindのカスタマイズ機能を利用するには)npmを介してTailwindをインストールすることをお勧めします。

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

2TailwindをCSSに追加する

@tailwindディレクティブを使用して、Tailwindのbase,componentsおよびutilitiesスタイルをCSSに挿入します。

@tailwind base;

@tailwind components;

@tailwind utilities;

Tailwindは、ビルド時にこれらのディレクティブを生成されたすべてのCSSと交換します。

postcss-import(RailsのWebpackerのような内部でそれを使用するツール)を使用している場合は、 独自の追加ファイルをインポートする際の問題を回避するために@tailwindディレクティブの代わりにインポートを使用してください。

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

3独自のTailwindコンフィグファイルを作る (optional)

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

npx tailwindcss init

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

// tailwind.config.js
module.exports = {
  future: {},
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

オプションで、-pフラグを含めて、基本的なpostcss.config.jsファイルを同時に生成できます。

npx tailwindcss init -p

Tailwindのコンフィグについてはconfiguration documentationをご覧ください。

4TailwindでCSSを処理する

PostCSSでのTailwindの使用

ほとんどのプロジェクトでは、ビルドチェーンにPostCSSプラグインとしてTailwindを追加することをお勧めします。

通常、これはTailwindをプラグインとしてpostcss.config.jsファイルに追加することを意味します。

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

以下に、いくつかの一般的なツールのより具体的な手順を示します。 ただし、一般的なPostCSSの使用を開始する手順についてはPostCSS documentationをご覧ください。

TailwindCLIの使用

単純なプロジェクトの場合、またはTailwindを単に試したいだけの場合は、Tailwind CLIツールを使用してCSSを処理できます。

npx tailwindcss build styles.css -o output.css

さまざまなCLIオプションの詳細についてはnpx tailwindcss help buildコマンドを使用してください。

Build Tool Examples

以下に、一般的なビルドツールを使用してTailwindを設定する基本的な例をいくつか示します。 また、クローンをしてローカルで実行することもできる、さらに多くの例もsetup-examplesリポジトリにありますので参照してください。

Webpack

postcss.config.jsファイルにプラグインとしてtailwindcssを追加します。

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

もしくはwebpack.config.jsファイルのpostcss-loader構成に直接含めます。

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        // ...
        use: [
          // ...
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                plugins: [
                  require('tailwindcss'),
                  require('autoprefixer'),
                ],
              },
            }
          },
        ],
      }
    ],
  }
}

Gulp

gulp-postcssに渡すプラグインのリストに tailwindcssを追加します。

gulp.task('css', function () {
  const postcss = require('gulp-postcss')

  return gulp.src('src/styles.css')
    // ...
    .pipe(postcss([
      // ...
      require('tailwindcss'),
      require('autoprefixer'),
      // ...
    ]))
    // ...
    .pipe(gulp.dest('build/'))
})

Laravel Mix

プレーンCSSでプロジェクトを作成している場合は、MixのpostCssメソッドを使用してCSSを処理し、プラグインとしてtailwindcssを含めます。

mix.postCss('resources/css/main.css', 'public/css', [
  require('tailwindcss'),
])

プリプロセッサを使用している場合は、optionsメソッドを使用してtailwindcssをPostCSSプラグインとして追加します。

const tailwindcss = require('tailwindcss')

mix.less('resources/less/app.less', 'public/css')
  .options({
    postCss: [
      tailwindcss('./path/to/your/tailwind.config.js'),
    ]
  })

Sassユーザーへの注意:

Mixの依存関係の1つに関する未解決の問題のため、TailwindでSassを使用するには、processCssUrlsを無効にする必要があります。

const tailwindcss = require('tailwindcss')

mix.sass('resources/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [ tailwindcss('./path/to/your/tailwind.config.js') ],
  })

この機能が何をしているかと、この機能を無効にすることの意味の詳細については、Laravel Mix documentationをご覧ください。

Webpack Encore

postcss.config.jsファイルを作成し、プラグインとしてtailwindcssを追加して、構成ファイルへのパスを渡します。

module.exports = {
  plugins: [
    require('tailwindcss'),
  ]
}

webpack.config.js内でスタイルエントリを作成し、PostCSSローダーを有効にします。

const Encore = require('@symfony/webpack-encore')

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addStyleEntry('app', './css/app.css')
  .enablePostCssLoader()

module.exports = Encore.getWebpackConfig()

Encore PostCSS docsのように、コールバックを渡すことでオプションをPostCSSローダーに渡すこともできます。

Encore.enablePostCssLoader(function(options) {
  options.config = {
    path: 'config/postcss.config.js'
  }
})

Sassユーザーへの注意: Encoreの依存関係の1つに関する未解決の問題のため、TailwindでSassを使用するには、resolveUrlLoaderを無効にする必要があります。

Encore.enableSassLoader(function (options) {}, {
  resolveUrlLoader: false
})

Brunch

postcss-brunchに渡すプロセッサのリストにtailwindcssを追加します。

exports.config = {
  // ..
  plugins: {
    // ...
    postcss: {
      processors: [
        require('tailwindcss'),
      ]
    }
    // ...
  }
}

Ember.js

ember-cli-postcssに渡すプラグインのリストにtailwindcssを追加します。

// ember-cli-build.js
'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          require('tailwindcss')
        ]
      }
    }
  });
  return app.toTree();
};

Using Tailwind via CDN

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

  • Tailwindのデフォルトテーマをカスタマイズできません。
  • @apply, @variantsなどのようなdirectivesは使えません。
  • group-hoverのような機能を有効化できません。
  • サードパーティのプラグインをインストールできません。
  • 使用していないコードを除去してファイルを出力することはできません。

Tailwindを最大限に活用するには、npm経由でインストールする必要があります。

Tailwindを利用して簡単なデモを行ったり、フレームワークを試したりするには、CDNを介して最新のデフォルト構成ビルドを入手します。

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

CDNビルドは大きいですが(46.2kB compressed, 1967.4kB raw)ビルドプロセスの一部としてTailwindを含めるときに表示されるサイズを表すものではありません。ベストプラクティスに従うサイトは、ほとんどの場合10kb未満に圧縮されています。


Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!