ホームページ > 記事 > ウェブフロントエンド > Tailwind CSS プロジェクトを最初からセットアップする

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

WBOYオリジナル: 2024-08-08 15:03:491019ブラウズ

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

JavaScript json css bootstrap html npm postcss Array for include Directory finally JS default this table Foundation

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：クールな CodePen デモ (7 月 4 日)次の記事：クールな CodePen デモ (7 月 4 日)

続きを見る

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

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

目次

Tailwind CSS の概要

Tailwind CSS を使用する理由

前提条件

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

Tailwind CSS のインストール

Tailwind CSS の構成

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

CSS の構築と監視

最初の HTML ファイルの作成

実稼働向けの最適化

Conclusion

関連記事