Tauri + React + TypescriptにTailwindCSSを導入

TailwindCSSは賛否あるが俺は使いたい！
Tauri + React + TypescriptにTailwindCSSを導入します．

ダウンロード

bun

1. インストール

bun add -d tailwindcss postcss autoprefixer

1. イニット

bunx tailwindcss init -p

npm

1. インストール

npm install -D tailwindcss postcss autoprefixer

1. イニット

npx tailwindcss init -p

ファイルを編集

tailwind.config.jsを書き換える．

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.cssに追加

index.css

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

さいごに

できた！