tailwindcss

1.インストール方法

最近発売されたv 3は、インストールと使用を簡素化しています.
1)以下のコマンドでインストールする

npm install -D tailwindcss postcss autoprefixer

2) tailwind.config.jsファイルの作成と設定
作成(tailwind.config.jsファイルが作成されました)

npx tailwindcss init

設定(上記コマンドで生成したtailwind.config.js)

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3) index.cssにtailwindを追加

// src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

2.役立つツールやサイトなど

1) vscode extension - Headwind

特定の順序でclassNameを使用して、指定されたcssコード

をソートします.

コラボレーションは、一貫したコード

を記述するのに役立つ.
2)tailwindcssクラス名要約表

サイト

には、使用可能なクラス名とパレットが含まれています.
https://umeshmk.github.io/Tailwindcss-cheatsheet/

より詳細な要約表

https://nerdcave.com/tailwind-cheat-sheet
3)tailwindcssコンポーネント、エレメント固有のコレクションサイト

ページレイアウトまたはサイト

は、特定の形状要素に関連する設計およびコードを参照できます.
https://tailwindcomponents.com/components

サイト

設計の構成部品を表示
https://www.tailwind-kit.com/components

3.その他

知能誘導拡張を自動的に推奨しない場合の解決方法

1) vscode settings.jsonファイルに特定のコードを追加

"tailwindCSS.includeLanguages": {
    "javascript": "javascript",
    "html": "HTML"
  },
  "editor.quickSuggestions": {
    "strings": true
  }

2)ctrl+spaceの使用
「ウィンドウ」ノートパソコンではctrl+spaceで自動的に推奨リストを完了することは少ない.
MacBookの場合...
キーボードショートカットでtriggerプロンプトを検索して入力するキーボード設定