🧐 react-prototype

spec
React + Next.js
Mobx
TypeScript
PostCSS + tailwindcss

// _app.tsx
import { ThemeProvider } from 'styled-components';
import { theme } from '@/styles/theme';
import '@/styles/globals.css';

❓ Next.js 의 _app

PostCSS

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

/* globals.css */
@tailwind base; 		/* normalize */
@tailwind components; 	/* layout */
@tailwind utilities; 	/* classes */

❓ tailwindcss 기본적으로 담고 있는 내용
cdnjs > tailwindcss
@tailwind Directives
Tailwind 커스텀🎨

F12 개발자 도구에서 Tailwind 클래스를 확인하면 globals.css 경로인 것을 확인할 수 있다.😉

styled-components 사용법

1. 태그명

const Circle = styled.div`
  width: 100px; height: 100px; border-radius: 50%;
  background: ${props => props.color || 'black'}; // props 적용
`;
<Circle color="blue" />

2. 컴포넌트명

const BigCircle = styled(Circle)`
  transform: scale(1.5);
`;
<BigCircle />

styled-components X TypeScript

TypeScript | styled-components

Before you can effectively start to use TypeScript you will have to do a little bit of configuration.
TypeScript를 효과적으로 사용하기 전에 약간의 구성을 수행해야 한다.

// styled.d.ts
import 'styled-components';
declare module 'styled-components' {
  export interface DefaultTheme {
    colors: {
      primary: string;
    };
  }
}

// theme.ts
import { DefaultTheme } from 'styled-components';
const colors = {
  primary: 'rgb(252 178 43)',
};
export const theme: DefaultTheme = {
  colors,
};

// [component].tsx
const Input = styled.input`
  caret-color: ${({ theme }) => theme.colors.primary};
`;

styled-components 를 통해 부여한 style이 별도 클래스를 통해 적용된다.🙄