Quickstarts
Quickstart: Tailwind CSS

Tailwind CSS クイックスタート

Plasmoを使用すると、PostCSSとの組み込み統合のおかげで、Tailwind CSSを使用するのが非常に簡単になります。設定は、公式Tailwind CSSドキュメントガイド (opens in a new tab)と同じです。

Autoprefixer、PurgeCSSなど、他のPostCSSプラグインも使用できます。このガイドでは、Tailwind CSSを使い始める手順を説明します。

🎉
Chrome拡張機能で簡単にTailwind CSSを使用しましょう！

例

Tailwind CSS を使用したPlasmoプロジェクトの作成

pnpm create plasmo --with-tailwindcss

手動インストール

既にPlasmo拡張機能プロジェクトがあり、Tailwind CSS v3を手動で追加したい場合は、このセクションをご覧ください！

依存関係の追加

pnpm i -D tailwindcss@3 postcss autoprefixer

tailwind.config.jsファイルの生成

npx tailwindcss init -p

PostCSS設定の定義

postcss.config.js
/**
 * @type {import('postcss').ProcessOptions}
 */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}
⚠️

ファイル名の拡張子が.cjsではなく.jsであることを確認してください。そうでないと、設定が誤ってJSONとして解析され、失敗する可能性があります。

Tailwind設定の設定

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: "jit",
  darkMode: "class",
  content: ["./**/*.tsx"],
  plugins: []
}

ルートスタイルの追加

style.css
@tailwind base;
@tailwind components;
@tailwind utilities;

使用方法

拡張機能ページで

すべての設定が整ったら、Reactコンポーネント内でTailwindを使用し始めましょう！以下は、ポップアップページでTailwindを使用する方法の例です。

popup.tsx
import { useReducer } from "react"
 
import "./style.css"
 
function IndexPopup() {
  const [count, increase] = useReducer((c) => c + 1, 0)
 
  return (
    <button
      onClick={() => increase()}
      type="button"
      className="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Count:
      <span className="inline-flex items-center justify-center w-8 h-4 ml-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
        {count}
      </span>
    </button>
  )
}
 
export default IndexPopup

コンテンツスクリプトUIで

コンテンツスクリプトUIでTailwindを使用するには、style.cssファイルをテキストデータとしてインポートし、getStyleメソッドを使用してCSUIライフサイクルに公開して、スタイルをCSUIのshadowDOMに挿入する必要があります。

content.tsx
import cssText from "data-text:~style.css"
import { useReducer } from "react"
 
export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText
  return style
}
 
const PlasmoOverlay = () => {
  const [count, increase] = useReducer((c) => c + 1, 0)
 
  return (
    <button
      onClick={() => increase()}
      type="button"
      className="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
      Count:
      <span className="inline-flex items-center justify-center w-8 h-4 ml-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
        {count}
      </span>
    </button>
  )
}
 
export default PlasmoOverlay
ℹ️

Tailwindとそのプラグインは多くの場合、CSS変数を宣言するために:rootに依存しているため、組み込みのRoot Containerを使用する場合は、コンテンツスクリプトUIスタイリングCSS変数の注意点に注意してください。

例えば、DaisyUI (opens in a new tab)を使用する予定がある場合は、スタイルをshadowDOMに添付する前に、:rootスコープを:hostに置き換える必要があります。

content.tsx
import cssText from "data-text:~style.css"
 
export const getStyle = () => {
  const style = document.createElement("style")
  style.textContent = cssText.replaceAll(':root', ':host(plasmo-csui)');
  return style
}
Quickstart: ReduxQuickstart: Supabase