Next.js + Tailwind 설정 방법
4355 단어 nexttailwindcss
이 문서에서는 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"
],
// ...
}
Reference
이 문제에 관하여(Next.js + Tailwind 설정 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jtakahashi64/how-to-set-up-tailwind-with-nextjs-4nc0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)