Panda CSS

• Panda CSS

Install Panda

pnpm

pnpm install -D @pandacss/dev

pnpm

pnpm panda init --postcss

package.json

package.json

{
  "scripts": {
    "prepare": "panda codegen"
  }
}

styled-system

pnpm

pnpm prepare

 rootプロジェクトのcssに配置。

@layer reset, base, tokens, recipes, utilities;

Responsive Design

• Responsive Design

 ブレイクポイントは、デバイスやビューポートのサイズによってレイアウトがどのようにレスポンシブに変化するかを示すトリガー。

• Customizing Breakpoints

panda.config.ts

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      breakpoints: {
        sm: '640px',
        md: '768px',
        lg: '1024px',
        xl: '1280px',
        '2xl': '1536px',
      },
    },
  },
})