Tailwind CSS プロジェクトを最初からセットアップする

Tailwind CSS プロジェクトを最初からセットアップする

Tailwind CSS は、スタイリングに対するユーティリティ優先のアプローチにより、開発者の間で人気の選択肢となっています。カスタム CSS を作成せずに Web アプリケーションを設計するための、高度にカスタマイズ可能で効率的な方法を提供します。このガイドでは、Tailwind CSS プロジェクトを最初からセットアップする手順を説明します。

目次

1. Tailwind CSS の概要
2. 前提条件
3. 新しいプロジェクトのセットアップ
4. Tailwind CSS のインストール
5. Tailwind CSS の構成
6. 最初の Tailwind CSS ファイルの作成
7. CSS の構築と監視
8. 実稼働向けの最適化
9. 結論

Tailwind CSS の概要

Tailwind CSS は、マークアップ内で直接カスタム デザインを構築するための低レベル ユーティリティ クラスを提供する、ユーティリティ優先の CSS フレームワークです。 Bootstrap や Foundation などの従来の CSS フレームワークとは異なり、Tailwind には事前に設計されたコンポーネントが付属していません。代わりに、HTML を離れることなくコンポーネントを設計できる一連のユーティリティ クラスが提供されます。

Tailwind CSS を使用する理由

• ユーティリティ優先のアプローチ: HTML にスタイルを直接適用できるため、カスタム CSS の必要性が減ります。
• カスタマイズ: Tailwind は高度にカスタマイズ可能で、デフォルト設定をオーバーライドして独自のデザイン システムを作成できます。
• レスポンシブ デザイン: Tailwind は、組み込みのレスポンシブ デザイン ユーティリティを提供し、モバイル ファーストのデザインを簡単に作成できます。
• 一貫性: アプリケーション全体で一貫したスタイルを確保します。

前提条件

始める前に、以下がインストールされていることを確認してください:

• Node.js (v12 以降)
• npm (ノードパッケージマネージャー)

Node.js と npm は公式 Web サイトからダウンロードしてインストールできます。

新しいプロジェクトのセットアップ

まず、プロジェクト用に新しいディレクトリを作成し、そこに移動します。

mkdir tailwind-project
cd tailwind-project

次に、新しい npm プロジェクトを初期化します。

npm init -y

このコマンドは、プロジェクトの依存関係とスクリプトを追跡する package.json ファイルを作成します。

Tailwind CSS のインストール

Tailwind CSS をインストールするには、それを依存関係としてプロジェクトに追加する必要があります。次のコマンドを実行します:

npm install tailwindcss

Tailwind CSS をインストールした後、構成ファイルを作成する必要があります。このファイルを使用すると、Tailwind CSS のデフォルト設定をカスタマイズできます。このファイルを生成するには、次を実行します:

npx tailwindcss init

このコマンドは、プロジェクト ルートに tailwind.config.js ファイルを作成します。このファイルは、Tailwind 設定をカスタマイズできる場所です。

Tailwind CSS の構成

tailwind.config.js ファイルを開きます。次のような基本構成が表示されるはずです:

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

コンテンツ配列は、すべてのテンプレート ファイルへのパスを指定するために使用されます。これにより、Tailwind は運用環境で未使用のスタイルをツリーシェイクできるようになります。 HTML ファイルと JavaScript ファイルにパスを追加します:

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

この設定は、Tailwind に src ディレクトリ内の .html または .js ファイル内のクラスを検索するように指示します。

初めての Tailwind CSS ファイルの作成

次に、Tailwind のベース、コンポーネント、ユーティリティ スタイルをインポートする新しい CSS ファイルを作成します。 src ディレクトリを作成し、その中に、styles.css:
という名前のファイルを作成します。

mkdir src
touch src/styles.css

styles.css ファイルを開き、次のインポートを追加します:

@tailwind base;
@tailwind components;
@tailwind utilities;

これらのディレクティブは、CSS ファイルにそのベース、コンポーネント、ユーティリティ スタイルを含めるよう Tailwind に指示します。

CSS の構築と監視

CSS をコンパイルするには、Tailwind CLI を使用する必要があります。ビルド スクリプトを package.json ファイルに追加します:

"scripts": {
  "build": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
  "watch": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch"
}

ビルド スクリプトは src/styles.css ファイルをコンパイルし、結果を dist/styles.css に出力します。監視スクリプトも同じことを行いますが、引き続き変更を監視し、自動的に再コンパイルします。

CSS を初めてコンパイルするには、次のコマンドを実行します。

npm run build

このコマンドは、コンパイルされたstyles.cssファイルを含むdistディレクトリを作成します。

最初の HTML ファイルの作成

次に、src ディレクトリにindex.html ファイルを作成します。

touch src/index.html

index.html ファイルを開き、次の定型 HTML を追加します。

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Project</title>
  <link href="../dist/styles.css" rel="stylesheet">


  <h1 id="Hello-Tailwind-CSS">Hello, Tailwind CSS!</h1>

この単純な HTML ファイルには、コンパイルされた Tailwind CSS ファイルが含まれており、スタイル付きの見出しが追加されています。

変更を確認するには、Web ブラウザでindex.html ファイルを開きます。

実稼働向けの最適化

プロジェクトをデプロイする準備ができたら、実稼働用に CSS を最適化する必要があります。 Tailwind は、未使用のスタイルを削除し、CSS を縮小するための組み込みツールを提供します。

To enable this, update your tailwind.config.js file to include the purge option:

module.exports = {
  content: [
    './src/**/*.{html,js}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next, install @fullhuman/postcss-purgecss and cssnano:

npm install @fullhuman/postcss-purgecss cssnano

Create a postcss.config.js file in your project root and add the following configuration:

const purgecss = require('@fullhuman/postcss-purgecss');
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    purgecss({
      content: ['./src/**/*.{html,js}'],
      defaultExtractor: content => content.match(/[\w-/:]+(?



<p>This configuration sets up PostCSS with PurgeCSS and CSSNano to remove unused styles and minify your CSS.</p>

<p>Finally, update your build script in package.json:<br>
</p>

<pre class="brush:php;toolbar:false">"scripts": {
  "build": "NODE_ENV=production tailwindcss -i ./src/styles.css -o ./dist/styles.css"
}

Run the build script to generate your optimized CSS:

npm run build

Your dist/styles.css file is now optimized for production.

Conclusion

Setting up a Tailwind CSS project from scratch is straightforward and provides a powerful toolkit for building custom designs. By following this guide, you've learned how to install Tailwind CSS, configure it, and optimize it for production. Tailwind's utility-first approach streamlines the styling process, allowing you to focus on building your application.

Happy coding!

以上がTailwind CSS プロジェクトを最初からセットアップするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。