Install tailwindcss with Next.js

프로젝트 생성

npx create-next-app@latest my-app

 

Tailwind CSS 설치

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

postcss.config.js 파일 생성

 

환경설정

파일명 : tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {

  content: [

    "./pages/**/*.{js,ts,jsx,tsx,mdx}",

    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    "./app/**/*.{js,ts,jsx,tsx,mdx}",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

};

 

파일명 : styles/globals.css

@tailwind base;

@tailwind components;

@tailwind utilities;

 

적용테스트

파일명 : pages/index.js

export default function Home() {
  return <div className="bg-red-500">test</div>;
}

 

vscode 에서 자동완성기능 사용을 위한 Tailwind CSS IntelliSense 플러그인 설치

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss