Closed1

TailwindCSS, vite + Reactで使うメモ

knaka Tech-Blogknaka Tech-Blog

TailwindCSS, vite + Reactで使うメモ

  • 準備: vite + reactを追加しておく
  • 下記の、公式vite手順と同じなので。簡単でした

環境

  • TailwindCSS
  • vite
  • React: 18.2

関連

https://tailwindcss.com/docs/guides/vite


npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

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

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

  • 起動
yarn dev

補足

  • main.tsxで、下記を削除している場合、CSS適用されない
import './index.css'

このスクラップは2023/08/31にクローズされました