NextJS TailwindCSS 적용

## 설치
`$ npm i tailwindcss postcss autoprefixer -D`

## 설정
`$ npx tailwindcss init`


#### 설정파일 수정

```
//tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  // darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    screens: {
      // sm: 480px,
      // md: 768px,
      // lg: 976px,
      xl: '1920px',
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};


```

postcss.config.js 파일이 없다면 생성한다.

```
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

```
#### CSS 파일에 Tailwind 링크 연결

```
// styles/tailwind.css

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;
/**
   * This injects Tailwind's component classes and any component classes
   * registered by plugins.
   */
@tailwind components;
/**
   * This injects Tailwind's utility classes and any utility classes registered
   * by plugins.
   */
@tailwind utilities;

```

```
// styles/globals.css

@import './tailwind.css';
```

```
// pages/_app.tsx

import '~/styles/globals.css';

import type {AppProps} from 'next/app';

export default function App({Component, pageProps}: AppProps) {
  return (
      <Component {...pageProps} />
  );
}

```

테일윈드를 적용해보니까 예전보다 너무 쉬워지긴 했다. 확실히 편리하긴하지만 뭔가 코드자체가 지저분해지는 느낌이 들 때가 있긴하다.

앞으로 유지보수와 관리, 혹은 협업을 잘 할 수 있게 고민을 해봐야겠다.