내일배움캠프 최종 프로젝트 - next ui primary 설정하기 + UI 스타일링

오늘은 내가 맡은 작업이 끝나서 리더가 맡은 게시물 작성의 UI를 내가 스타일링 하기로 했다.

next ui는 편하다. 하지만 한계도 있다. 마음대로 커스터마이징하기 위해 tailwindcss도 className=""이런식으로 같이 쓴다.

오늘 input을 스타일링하는데 결국 현재 프로젝트의 주조색인 #0051FF를 primary로 바꾸기 위해 찾아보았다. 공식문서에는 theme에 연관해서 사용하도록 추천했는데 아무리 해도 안되었다.

결국 오랜만에 제천튜터님의 도움을 받았다.

import {nextui} from '@nextui-org/react';
import type {Config} from 'tailwindcss';
const config: Config = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      colors: {
        primary: {
          DEFAULT: '#0051FF',
        },
      },
    },
  },
  plugins: [nextui()],
};
export default config;

tailwind.config.ts의 theme의 extend 안에 primary로 하니까 되었다.

그리고 UI를 완성했다..
[Before]

[After]

언제나 스타일링은 뿌듯하다.

오늘의 한줄평 : 가끔은 쉬고싶다....