TailWinCSSから始める

あなたは“TailWindCSS”について聞いたことがありますが、あなたはそれが何をするか、それを使用する方法を知らないかもしれません.この記事では、ToodWindCSSのすべてについて、なぜそれが使用されているか、そしてそのコンポーネントライブラリが使用するかどうかをあなたと共有します.

TailWindowとは

Tailwind CSS is self-described as a utility first CSS framework. Rather than focusing on the functionality of the item being styled, Tailwind is centered around how it should be displayed.

Your Friendly Search Engine Google

Googleが言っている単純な用語で

Tailwind CSS is a utility-based first-class framework that uses classes like flex, text-center, pt- 4, and many more to build any design without leaving your HTML code.

よく読んでください、はい、あなたはスタイルなしであなたのHTMLコードの中でCSSなしでデザインを構築することができます.すべてのソフトウェアエンジニアは80/20のルールを実行できるツールを求めていると言っています.
ゆえに、ルールの現実をテストする.Toowindはブートストラップや他のCSSフレームワークのような他の大きなフレームワークを継承するつもりはないことに注意してください.実際には、ブートストラップはブートストラップよりもはるかに低いレベルのユーティリティクラスを使用しているのに対して、ブートストラップはカードのような準備された構成要素を持っています.

class = "rounded shadow p-2 bg-white w-34 h-24"

// Rounded - To give the card rounded borders
// p-2 - To give padding
// bg-white - To give a background color of white
// shadow - To give the card a shadow
// And other utility functions to customize your content

なぜTailWindCSSを使用しますか？

CSSスタイリング💨

それはスタイルのHTMLになると、結果として風より速いフレームワークがない場合は、スタイルの要素によってきれいなデザインやレイアウトを作成することができます.これはTailwindの組み込みクラスのためです.したがって、CSSルールを自分で書く必要はありません.これらのCSSクラスは、Tailwindで建物とスタイルがとても速い理由です.

スタイリングコントロール🕹️

TailWindCSSは、コンポーネントが見える方法を定義しません.さまざまなユーティリティクラスを組み合わせて、各コンポーネント/レイヤを定義します.たとえば、別のセクションを/div別の外観を与えることができる、Tailwindは、あなたのプロジェクトのスタイルをどのようにすべきかについて独創的ではないそれらのフレームワークの1つです.

それはユーティリティクラスベースのフレームワークですので、CSSを書くことなくカスタムデザインを構築することができます伝統的なアプローチ..古いことを知っている😅)

.body{
         background-color: white;
         padding: 0px;
         margin: 0px;
}

初心者フレンドリー

必要条件

HTMLとCSSの基礎知識🧱

あなたのフロントエンドをより魅力的にする熱意👀

インストール、設定、使用方法🛠️

TailWindCSSをインストールする2つの最も使用される方法を見てみましょう.TailWindCliとTarwindCDN

尾翼CLI

Tailwindをインストールし、そよ風を作成します.設定.私たちはNPM(ノード・パッケージ・マネージャ)を利用しなければなりませんhere

// Initialize npm
npm init -y

// In your terminal
npm install tailwindcss

一度インストールされたら

npx install tailwindcss init --full

これはあなたのルートディレクトリのTailwind CLIユーティリティを使用してプロジェクトのTailwind設定ファイルを生成することです.なぜ❓ デフォルトでは、tailwindはオプションのテールウインドを探すでしょう.設定.任意のカスタマイズの定義を定義することができますあなたのプロジェクトのルートでJSファイル.

# tailwindcss.config.js
# You should see something like this in your config file... but it should be more than 900lines 😅

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

エディタの設定💣💥

あなたの優先IDEとしてVSCodeを使用する場合は、拡張子“Tailwind CSS IntelliSense”をインストールするだけで、自動補完、構文強調、およびライニングなどの高度な機能を備えたVSCodeユーザーを提供します.
あなたのディレクトリに移動すると、srcと呼ばれるフォルダを作成し、そのフォルダの中にファイルを作成します.CSS私の場合、それはスタイルです.CSSと私のディレクトリは以下のようになります

あなたのスタイルで.CSSを追加して欲しい

@tailwind base;
@tailwind components;
@tailwind utilities;

これらはTruwindディレクティブであり、メイン層に重要な層です.CSSあなたのHTMLファイルでTarwindを使用するために、Tarwindはこれらのディレクティブを使用する方法を説明しましょう.Tailwindは、srcフォルダにディレクティブを使用し、ファイル内で使用できるスタイルシート形式に変換します

// Something like this

style.css [in src ] ➡️ Tailwind [works its magic] ➡️ main.css [a stylesheet we can use/link to] ➡️ index.html

もう一つのステップと我々はすべて我々のプロジェクトでTarwindを使用するように設定され、それは私たちのメインを構築することです.上で説明したように、私たちはパッケージで簡単にできます.ファイルのスクリプトセクションでファイルを追加します

"scripts": {
      "build-css": "tailwindcss build src/styles.css -o public/main.css"
}

スクリプトがinsinuatingすることは、我々がスタイルを持っているsrcフォルダに入るべきである.CSSファイルはマジックを行い、ファイルmainに格納される出力を生成します.パブリックフォルダで作成されたCSS.
このようなパッケージをパッケージに含める必要があります.JSONファイル.「ビルドCSS」を使用する義務がないわけではありませんが、あなたが私がその命名規則を使用した任意の変数名を使用することができます

// Once that is done run the snippet below

npm run build-css

スニペットを走らせると、メインに気づくでしょう.Towwindによって作成されたパブリックフォルダの中のCSSファイル

インデックスを作成しましょう.SRCフォルダ内のHTMLファイルとメインスタイルシートのリンク

// index.html

<!doctype html>
<html>
    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <link href="/public/main.css" rel="stylesheet">
    </head>
    <body>  
        <h1 class="flex justify-center text-3xl font-bold underline">    
            Hello, world! 
        </h1>
    </body>

</html>

あなたがインデックスを実行するとき、あなたはこれに類似した何かを得なければなりません.HTML

2 . tailwind cdn

このプロセスはいくぶん単純です、あなたがしなければならないすべては、あなたのインデックスの先頭タグの中にTailwind CDNスクリプトタグを入力することです.任意のビルドステップなしで、ブラウザの右側にHTMLを実行します.

// index.html

<!doctype html>
<html>
    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body>  
        <h1 class="flex justify-center text-3xl font-bold underline">    
            Hello, world! 
        </h1>
    </body>

</html>

出力は上記のCLIバージョンと同じであるべきです、CDNが開発目的のために設計されているのを知っているべきです😂)

ユーティリティ🐕‍🦺

これらは私の個人的なお気に入りのユーティリティの1つです私は自分のプロジェクトのほとんどを使用して負荷を使用してより多くのユーティリティを使用しているとTruwinddoc

フレックス表示.

センターを正当化してください.

マージントップ:2.5レム

PX - 10 =
{ }
パッドを左:2.5レム/40 px/;
パッドを右詰めにします
｝

アイテムセンター=アイテムの整列

テキストXL =フォントサイズ:1.25レム

MD :テキストXL = MDは媒体サイズを意味します.

フォントモノラル=フォントファミリー:UI monospace、sfmonoの定期的な、メンロ、モナコ、コンソール、“解放モノ”、“宅配便の新”、単空間;

赤の背景色を適用

ホバー:テキストホワイト=ホバーに白の色を適用する

アンダーライン=テキスト装飾:下線

フォント太字=フォントウェイト

ラッピング🧻

TailWindCSSは、コンポーネントの外観を定義しません.あなたが一緒にいくつかのクラスを組み合わせてあなたの希望の結果を与えることを定義します.
次の記事ではTruwindを使ってログインフォームを構築します.

つながりましょう🖇️

私に手を差し伸べる

(私はすぐにフォローします)従って私に手を差し伸べる

また、以下のコメント欄に接続することができます(あなたの考えを残してください)あなたの次のプロジェクトでTarwindCSSを試してください❓❓ )