Tailwind CSS は、スタイリングに対するユーティリティ優先のアプローチにより、開発者の間で人気の選択肢となっています。カスタム CSS を作成せずに Web アプリケーションを設計するための、高度にカスタマイズ可能で効率的な方法を提供します。このガイドでは、Tailwind CSS プロジェクトを最初からセットアップする手順を説明します。
Tailwind CSS は、マークアップ内で直接カスタム デザインを構築するための低レベル ユーティリティ クラスを提供する、ユーティリティ優先の CSS フレームワークです。 Bootstrap や Foundation などの従来の CSS フレームワークとは異なり、Tailwind には事前に設計されたコンポーネントが付属していません。代わりに、HTML を離れることなくコンポーネントを設計できる一連のユーティリティ クラスが提供されます。
リーリー
リーリー
リーリー
リーリー
リーリー
リーリー
初めての Tailwind CSS ファイルの作成
リーリー
styles.css ファイルを開き、次のインポートを追加します:
リーリー
これらのディレクティブは、CSS ファイルにそのベース、コンポーネント、ユーティリティ スタイルを含めるように Tailwind に指示します。
CSS の構築と監視
リーリー
ビルド スクリプトは src/styles.css ファイルをコンパイルし、結果を dist/styles.css に出力します。監視スクリプトも同じことを行いますが、変更を監視し続け、自動的に再コンパイルされます。
このコマンドは、コンパイルされたstyles.cssファイルを含むdistディレクトリを作成します。
index.html ファイルを開き、次の定型 HTML を追加します:
この単純な HTML ファイルには、コンパイルされた 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-/:]+(?ログイン後にコピー
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 サイトの他の関連記事を参照してください。