CSS
5423 ワード
CSSの技術は、Web開発の最大のゲームチェンジャーの一つだった.それは、より多くのスタイリング能力と自由を考慮に入れました.CSSが成長したので、その複雑さもしました.回想のCSSは書くことに挑戦していません、しかし、それは実行するトリッキーでありえます.
cssの次のフェーズは,ライブラリとフレームワークの開発であった.CSSフレームワークの最も有名な例の一つはブートストラップです.
ブートストラップのようなフレームワークは大きな欠点がある.増加した成長と使用のために、彼らはあまりに大きくなって、彼らのスタイルのより少ない支配を提供します.開発者が何百ものクラスを学ばなければならないので、ブートストラップのような学習枠組みはますます挑戦的になりました.
この記事では、以下を説明します.風のCSSが何であるか. 風のCSSをインストールして設定する方法. 規則的な事前に書かれたクラスでユーティリティベースのクラスを使用する方法. このチュートリアルとともに、HTMLとCSSの基本的な理解が必要です.CSSフレームワークを使用した以前の経験は、追加の利点です.
Cookwind CSSとは
TrewindはアダムWathanによって作成されたCSSフレームワークです.他のフレームワークとは異なり、HTMLタグを追加するためにクラスでビルドされません.代わりに、別のアプローチを使用します.これは、ユーティリティベースのクラスを使用して制御のはるかに低いレベルをもたらします.
インストール
それを右に取得し、それについての詳細を発見することができますので、風のCSSをインストールしてみましょう.あなたのユースケースに応じて、2つの方法があります.
方法1 : CDNの使用
CDNを使用するのはCSSフレームワークを使用する最も一般的な方法です.私たちは、HTMLページの先頭のセクションのリンクの形でCDNからの風のCSSファイルを加えます.
まず、HTMLファイルを作成し、名前を付けます.我々は、我々のインデックスを命名します.HTML .そして、その中に、boilerplate HTMLコードを書き、以下に示すようにCDNを加えます.
注意: CDNを使用してCootwind CSSをインストールするには以下のような欠点があります.サードパーティ製のプラグインを追加できません. ファイルがロードされるとき、あなたが未使用のファイルをパージすることができないとき、Tailwind CSSがファイルをフェッチするので、. あなたはテーマのようないくつかの設定を使用することはできません. 方法2 : NPMの使用
NPMメソッドを使用して、Truwind CSSの完全な経験を与えます.JavaScriptのほとんどのフレームワークが同様のアプローチを使用するため、一般的なインストール方法です.フレームワークのアーキテクチャによっては、インストールプロセスには最小限の違いがあります.
始めましょう.
まず、私たちが働くディレクトリを作りましょう.
端末で次のコマンドを実行します.
MKDIRセクション和風デモ＆CDセクション
NPM INIT - Y
次に、Truwind CSSをインストールしましょう.また、他のパッケージをインストールする必要があります.私たちには、Cookieを必要とするので、Trewind CSSがプリプロセッサに依存するので、Postcssが必要です.Trewindは、CSSをバニラCSSに移すために、Autoprefixerと呼ばれるPostcssプラグインを使用します.
端末の実行時:
NPMインストールtailwindcss@latest postcss@latest autoprefixer@latest
上記のコマンドは必要なすべての依存関係をインストールします.次に、CookieとPostcssを設定するスクリプトを作成しなければなりません.スクリプトを生成するには、Tailwind CSSによって提供されるTailwind CLIユーティリティを使用します.
端末の実行時:
NPXテールウインド
それは2つのファイルを生成します.設定.JSとPostcss .設定.jsそよ風設定.JSは次のようになります.
モジュールです.エクスポート
パージ:[]
DarkMode : false//または'メディア'または'クラス'
テーマ:
拡張:{ }
//
バリアント
拡張:{ }
//
プラグイン:[]
//
Postcss.設定.jsファイルは次のようになります.
モジュールです.エクスポート
プラグイン:{
TailWindcss :{}
AutoPrefixer :{}
//
//
環境の設定に成功しましたので、プロジェクトでTarwind CSSを設定しましょう.
まず、インデックスと呼ばれるHTMLファイルを2つ作成します.スタイルとスタイルシート.CSS
HTMLの部分は、記事の冒頭に基本的なboilerplate構文を持つことができます.CSSファイルでは、AutoPrefixerにTailwind CSSを使用するように通知する必要があります.
以下に示すように、Tailwind CSSファイルをインポートすることでこれを行います.
ベース
コンポーネント
ユーティリティ
最後に、端末風のCSSを構築する必要があります.
NPX TreatWinCSScli@latestCSS/tailwindをビルドします.CSS
このコマンドはテールウインドを生成します.CSSファイル内のCSSファイル.コマンドの- oは出力パスを表し、出力ファイルはCSS/Tarwindにあることを指定します.CSSパス.
注意: CSSファイルをそのコマンドで動作させる必要はありません.ただし、スタイルが必要です.CSSファイルは、カスタムスタイルを追加し、そのファイルにTrewind風CSSを書くか、カスタムCSSでミックス風風CSSを作成します.
CSSを処理する別の方法は、パッケージにスクリプトを追加することで、プロダクションでそれを行うことです.JSONビルド時にPostCSS CLIを使用して動作を実行します.
これを行うには、PostCSS CLIをインストールしましょう.
端末でこれを実行します.
NPMのインストール
次に、パッケージにビルドスクリプトを追加します.このようなJSON :
"スクリプト":
"CSS "/Postwind style . css - o CSS/tailwind . css "
｝
さて、NPM Runビルドを実行するときは、必要に応じて、CookieファイルをCSSフォルダにコンパイルする必要があります.
私たちは、私たちが普通のCSSファイルと同じように、我々のtailwind cssファイルをHTMLに加える必要があります.
書類
そのように、我々はすべてを設定している.
ユーティリティクラスの操作
ユーティリティクラスがどのように動作するかを示すと説明するには、Truwind CSSを使用してボタンを作成しましょう.これは、Cookwind CSSがHTML要素にどのように影響するかを示します.
HTMLページのbodyタグ内に次のように追加します.
セクション
私たちのボタンにいくつかのクラスを追加しましょう.風車CSSでは、100〜900の色の強さによって色の値が変化する.バックグラウンド用のユーティリティクラスはBGです.私たちのボタンの背景を緑のかすかな色合いを作るために、我々はクラスBG -グリーン- 100を加えます.
次に、ボタンのテキストをスタイルしましょう.このため、ユーティリティクラスのテキストを使用します.カラールールが残っているので、テキストを色に追加するには、text - green - 100のクラスを追加します.
私たちのボタンは良いので、いくつかのパディングを追加しましょう探しています.パディングのために、構文は全く簡単です.プロパティ、サイズ、値.
これは、例えば、マージンのようなすべてのサイズと間隔のプロパティに適用されます.パッドを下に追加するには、PB - 8です.これらの値は0から64の範囲である.どの程度の範囲で動作するかを見るには、ドキュメントをチェックしてください.
私たちの例では、パディングは上部と下部とPX - 6のためのPY - 2です.MX - 20でMX - 20と左にいくつかのマージンを加えましょう.
さて、丸めたユーティリティでボタンをもっと丸くしましょう.ボーダー半径ユーティリティの完全なリストと、ドキュメント内のすべてのクラスを見つけることができます.丸いLGに対応する境界半径0.5 mを使用します.
最後に、ボタンをより活発にするために若干のホバーマジックを加えましょう.そのためには、Hover : Hover : BG - Green - 600と
ホバー:テキスト-グリーン- 200.
それで、我々はすべてのCSSなしで我々のボタンをスタイル付けました.取るべき重要なことは、Cookieがスタイルと要素の上であなたに与えるどれくらいの支配です.チュートリアルの完全なコードを取得します.
最後のコードは次のようになります.
cssの次のフェーズは,ライブラリとフレームワークの開発であった.CSSフレームワークの最も有名な例の一つはブートストラップです.
ブートストラップのようなフレームワークは大きな欠点がある.増加した成長と使用のために、彼らはあまりに大きくなって、彼らのスタイルのより少ない支配を提供します.開発者が何百ものクラスを学ばなければならないので、ブートストラップのような学習枠組みはますます挑戦的になりました.
この記事では、以下を説明します.
Cookwind CSSとは
TrewindはアダムWathanによって作成されたCSSフレームワークです.他のフレームワークとは異なり、HTMLタグを追加するためにクラスでビルドされません.代わりに、別のアプローチを使用します.これは、ユーティリティベースのクラスを使用して制御のはるかに低いレベルをもたらします.
インストール
それを右に取得し、それについての詳細を発見することができますので、風のCSSをインストールしてみましょう.あなたのユースケースに応じて、2つの方法があります.
方法1 : CDNの使用
CDNを使用するのはCSSフレームワークを使用する最も一般的な方法です.私たちは、HTMLページの先頭のセクションのリンクの形でCDNからの風のCSSファイルを加えます.
まず、HTMLファイルを作成し、名前を付けます.我々は、我々のインデックスを命名します.HTML .そして、その中に、boilerplate HTMLコードを書き、以下に示すようにCDNを加えます.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Section Tailwind Demo</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body></body>
</html>
注意: CDNを使用してCootwind CSSをインストールするには以下のような欠点があります.
NPMメソッドを使用して、Truwind CSSの完全な経験を与えます.JavaScriptのほとんどのフレームワークが同様のアプローチを使用するため、一般的なインストール方法です.フレームワークのアーキテクチャによっては、インストールプロセスには最小限の違いがあります.
始めましょう.
まず、私たちが働くディレクトリを作りましょう.
端末で次のコマンドを実行します.
MKDIRセクション和風デモ＆CDセクション
NPM INIT - Y
次に、Truwind CSSをインストールしましょう.また、他のパッケージをインストールする必要があります.私たちには、Cookieを必要とするので、Trewind CSSがプリプロセッサに依存するので、Postcssが必要です.Trewindは、CSSをバニラCSSに移すために、Autoprefixerと呼ばれるPostcssプラグインを使用します.
端末の実行時:
NPMインストールtailwindcss@latest postcss@latest autoprefixer@latest
上記のコマンドは必要なすべての依存関係をインストールします.次に、CookieとPostcssを設定するスクリプトを作成しなければなりません.スクリプトを生成するには、Tailwind CSSによって提供されるTailwind CLIユーティリティを使用します.
端末の実行時:
NPXテールウインド
それは2つのファイルを生成します.設定.JSとPostcss .設定.jsそよ風設定.JSは次のようになります.
モジュールです.エクスポート
パージ:[]
DarkMode : false//または'メディア'または'クラス'
テーマ:
拡張:{ }
//
バリアント
拡張:{ }
//
プラグイン:[]
//
Postcss.設定.jsファイルは次のようになります.
モジュールです.エクスポート
プラグイン:{
TailWindcss :{}
AutoPrefixer :{}
//
//
環境の設定に成功しましたので、プロジェクトでTarwind CSSを設定しましょう.
まず、インデックスと呼ばれるHTMLファイルを2つ作成します.スタイルとスタイルシート.CSS
HTMLの部分は、記事の冒頭に基本的なboilerplate構文を持つことができます.CSSファイルでは、AutoPrefixerにTailwind CSSを使用するように通知する必要があります.
以下に示すように、Tailwind CSSファイルをインポートすることでこれを行います.
ベース
コンポーネント
ユーティリティ
最後に、端末風のCSSを構築する必要があります.
NPX TreatWinCSScli@latestCSS/tailwindをビルドします.CSS
このコマンドはテールウインドを生成します.CSSファイル内のCSSファイル.コマンドの- oは出力パスを表し、出力ファイルはCSS/Tarwindにあることを指定します.CSSパス.
注意: CSSファイルをそのコマンドで動作させる必要はありません.ただし、スタイルが必要です.CSSファイルは、カスタムスタイルを追加し、そのファイルにTrewind風CSSを書くか、カスタムCSSでミックス風風CSSを作成します.
CSSを処理する別の方法は、パッケージにスクリプトを追加することで、プロダクションでそれを行うことです.JSONビルド時にPostCSS CLIを使用して動作を実行します.
これを行うには、PostCSS CLIをインストールしましょう.
端末でこれを実行します.
NPMのインストール
次に、パッケージにビルドスクリプトを追加します.このようなJSON :
"スクリプト":
"CSS "/Postwind style . css - o CSS/tailwind . css "
｝
さて、NPM Runビルドを実行するときは、必要に応じて、CookieファイルをCSSフォルダにコンパイルする必要があります.
私たちは、私たちが普通のCSSファイルと同じように、我々のtailwind cssファイルをHTMLに加える必要があります.
書類
そのように、我々はすべてを設定している.
ユーティリティクラスの操作
ユーティリティクラスがどのように動作するかを示すと説明するには、Truwind CSSを使用してボタンを作成しましょう.これは、Cookwind CSSがHTML要素にどのように影響するかを示します.
HTMLページのbodyタグ内に次のように追加します.
セクション
私たちのボタンにいくつかのクラスを追加しましょう.風車CSSでは、100〜900の色の強さによって色の値が変化する.バックグラウンド用のユーティリティクラスはBGです.私たちのボタンの背景を緑のかすかな色合いを作るために、我々はクラスBG -グリーン- 100を加えます.
次に、ボタンのテキストをスタイルしましょう.このため、ユーティリティクラスのテキストを使用します.カラールールが残っているので、テキストを色に追加するには、text - green - 100のクラスを追加します.
私たちのボタンは良いので、いくつかのパディングを追加しましょう探しています.パディングのために、構文は全く簡単です.プロパティ、サイズ、値.
これは、例えば、マージンのようなすべてのサイズと間隔のプロパティに適用されます.パッドを下に追加するには、PB - 8です.これらの値は0から64の範囲である.どの程度の範囲で動作するかを見るには、ドキュメントをチェックしてください.
私たちの例では、パディングは上部と下部とPX - 6のためのPY - 2です.MX - 20でMX - 20と左にいくつかのマージンを加えましょう.
さて、丸めたユーティリティでボタンをもっと丸くしましょう.ボーダー半径ユーティリティの完全なリストと、ドキュメント内のすべてのクラスを見つけることができます.丸いLGに対応する境界半径0.5 mを使用します.
最後に、ボタンをより活発にするために若干のホバーマジックを加えましょう.そのためには、Hover : Hover : BG - Green - 600と
ホバー:テキスト-グリーン- 200.
それで、我々はすべてのCSSなしで我々のボタンをスタイル付けました.取るべき重要なことは、Cookieがスタイルと要素の上であなたに与えるどれくらいの支配です.チュートリアルの完全なコードを取得します.
最後のコードは次のようになります.
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Section-Tailwind-Demo</title>
<link rel="stylesheet" href="css/tailwind.css" />
</head>
<body>
<button
type="button"
class="hover:bg-green-600 hover:text-green-200 bg-green-100 text-green-700 mx-20 my-20 px-6 py-2 rounded-lg"
>
Section
</button>
</body>
</html>`
Reference
この問題について(CSS), 我々は、より多くの情報をここで見つけました https://dev.to/mokadevlight/tailwind-css-i9pテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol