Tailwind CSS プロジェクトを最初からセットアップする-CSSチュートリアル-php.cn

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

WBOY

リリース： 2024-08-08 15:03:49

オリジナル

939 人が閲覧しました

Setting Up a Tailwind CSS Project from Scratch

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

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

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 を追加します。

<!DOCTYPE html>
<html lang="en">
<head>
  <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">
</head>
<body>
  <h1 class="text-4xl font-bold text-center mt-10">Hello, Tailwind CSS!</h1>
</body>
</html>

ログイン後にコピー

この単純な 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-/:]+(?<!:)/g) || [],
    }),
    cssnano({
      preset: 'default',
    }),
  ],
}

ログイン後にコピー

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

Finally, update your build script in package.json:

"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 サイトの他の関連記事を参照してください。