Next.js
Nextjs 보일러 프로젝트 생성 뼈대
Dev갱이
2023. 1. 10. 22:02
728x90
1. tsconfig.json 설정
2. prettier 설정
3. sass 설치
npm i sass
공식문서 참고 -https://nextjs.org/docs/messages/install-sass
4. tailwind.css 설치
https://tailwindcss.com/docs/guides/nextjs
Install Tailwind CSS with Next.js - Tailwind CSS
Setting up Tailwind CSS in a Next.js v10+ project.
tailwindcss.com
tailwind.config.js
const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
color: {
primary: '#5F3DF7',
},
transitionTimingFunction: {
DEFAULT: 'ease-in-out',
},
transitionDuration: {
DEFAULT: '350ms',
},
},
},
plugins: [
plugin(({ addUtilities }) => {
addUtilities({
'.flex-center-between': {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
},
'.flex-center-center': {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
});
}),
],
};

전체 구조
728x90