thisyujeong.dev

next.js 에서 tailwind CSS 사용하기
June 19, 2021

tailwindCSS Install Guid

Create project

npx create-next app my-project
cd my-project

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer

Configure

tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Global CSS setting

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

Plugins

HTML에서 스타일을 추가할 수 있는 플러그인

yarn add -D @tailwindcss/typography
tailwind.config.js
module.exports = {
  content: [ ... ],
  theme: { ... },
  plugins: [require("@tailwindcss/typography")],
};