shadcn & tailwind library

shadcn는 tailwind 기반으로 작동함
tailwind 설치 후 사용 가능

tailwind

환경 설정

terminal

npx create-next-app@latest

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

global.css

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

shadcn

ui.shadcn.com

환경 설정

terminal

npx shadcn-ui@latest init

components.json

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes

terminal

npx shadcn-ui@latest add button

사용 예시

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

---

원본글: shadcn/ui 와 tailwind 라이브러리 함께 사용하기