2023-12-20 본캠프 55일차 / 74일차 TIL

주요진행사항

- next.js 튜토리얼

next.js 튜토리얼

next.js Styling

공식문서에서 권장하는 styling 방식은 tailwind나 css modules 이다.

그중에서 tailwind에서 대해서 알아보겠다.

tailwind

1) root css 파일을 만든다

상단에 다음과 같이 tailwind를 사용하기 위해서 import 한다.

/*global.css*/
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

2) PostCSS 설정

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

3) Root 폴더에 설정

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

4) 컴포넌트에서 사용

import React from 'react';

const MyComponent = () => {
  return (
    <div className="bg-blue-500 text-white p-4">
      This is a component with Tailwind CSS styles.
    </div>
  );
};

export default MyComponent;

다음과 같이 className 내에서 지정된 규칙으로 사용이 가능하다.

해당 규칙은 공식문서에서 확인이 가능하다.

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

또한 다음과 같은 vsCode에서 자동완성을 위한 확장프로그램도 있다.

저작자표시 변경금지

'내일배움캠프 TIL' 카테고리의 다른 글

2024-01-04 본 캠프 65일차 / 84일차 TIL (0)	2024.01.04
2023-12-21 본캠프 56일차 / 75일차 TIL (0)	2023.12.22
2023-12-19 본캠프 54일차 / 73일차 TIL (0)	2023.12.19
2023-12-18 본캠프 53일차 / 72일차 TIL (0)	2023.12.18
2023-12-15 본캠프 52일차 / 71일차 TIL (0)	2023.12.18

개발하는 소대장

2023-12-20 본캠프 55일차 / 74일차 TIL