Tailwind CSS は、スタイリングに対するユーティリティ優先のアプローチにより、開発者の間で人気の選択肢となっています。カスタム CSS を作成せずに Web アプリケーションを設計するための、高度にカスタマイズ可能で効率的な方法を提供します。このガイドでは、Tailwind CSS プロジェクトを最初からセットアップする手順を説明します。
Tailwind CSS は、マークアップ内で直接カスタム デザインを構築するための低レベル ユーティリティ クラスを提供する、ユーティリティ優先の CSS フレームワークです。 Bootstrap や Foundation などの従来の CSS フレームワークとは異なり、Tailwind には事前に設計されたコンポーネントが付属していません。代わりに、HTML を離れることなくコンポーネントを設計できる一連のユーティリティ クラスが提供されます。
始める前に、以下がインストールされていることを確認してください:
Node.js と npm は公式 Web サイトからダウンロードしてインストールできます。
まず、プロジェクト用に新しいディレクトリを作成し、そこに移動します。
mkdir tailwind-project cd tailwind-project
次に、新しい npm プロジェクトを初期化します。
npm init -y
このコマンドは、プロジェクトの依存関係とスクリプトを追跡する package.json ファイルを作成します。
Tailwind CSS をインストールするには、それを依存関係としてプロジェクトに追加する必要があります。次のコマンドを実行します:
npm install tailwindcss
Tailwind CSS をインストールした後、構成ファイルを作成する必要があります。このファイルを使用すると、Tailwind CSS のデフォルト設定をカスタマイズできます。このファイルを生成するには、次を実行します:
npx tailwindcss init
このコマンドは、プロジェクト ルートに tailwind.config.js ファイルを作成します。このファイルは、Tailwind 設定をカスタマイズできる場所です。
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 ファイルを作成します。 src ディレクトリを作成し、その中に、styles.css:
という名前のファイルを作成します。
mkdir src touch src/styles.css
styles.css ファイルを開き、次のインポートを追加します:
@tailwind base; @tailwind components; @tailwind utilities;
これらのディレクティブは、CSS ファイルにそのベース、コンポーネント、ユーティリティ スタイルを含めるよう Tailwind に指示します。
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ディレクトリを作成します。
次に、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.
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
