Next.js + Tailwind 설정 방법

4355 단어 nexttailwindcss
Tailwind는 유틸리티 우선 CSS 프레임워크입니다.
이 문서에서는 Next.js + Tailwind를 설정하는 방법을 설명합니다.

설치




npm i --save-dev tailwindcss
npm i --save-dev postcss
npm i --save-dev autoprefixer


초기화




npx tailwindcss init -p


환경




// tailwind.config.js

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};


쓰다




/* src/styles/globals.css */

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


페이지에서 Tailwind 사용




// src/pages/example.tsx

const Page = (): JSX.Element => {
  return (
    <p data-testid="text" className="underline">
      Hello
    </p>
  );
};

export default Page;


확인하다




npm run dev


http://localhost:3000/example

Visual Studio 코드 지원




// .vscode/extensions.json

{
  "recommendations": ["bradlc.vscode-tailwindcss"]
}


ESLint 지원




npm i --save-dev eslint-plugin-tailwindcss



// .eslintrc.json

{
  "extends": [
    // ...
    "plugin:tailwindcss/recommended"
  ],
  // ...
}

좋은 웹페이지 즐겨찾기