Nextjs 앱에 TailwindCSS 추가

14872 단어 tailwindcssreactnextjswebdev
TailwindCSS는 지금 분노입니다. 이유를 쉽게 알 수 있습니다. 스타일링 앱을 빠르고 쉽게 만듭니다. CSS 기술을 희생하지 않고. Bootstrap에서 복사 및 붙여넣기 구성 요소가 없습니다.



Nextjs에서 사이트 스타일을 지정하기 위해 TailwindCSS를 설정하는 방법을 보여 드리겠습니다.

TailwindCSS 기본 사항



기본 사항을 알고 있다면 건너뛰십시오. TailwindCSS는 다른 유형의 CSS 프레임워크입니다. 미리 정의된 구성 요소를 사용하는 대신. 미리 정의된 클래스가 제공됩니다. 요소에 클래스 이름을 지정하면 자동으로 스타일이 지정됩니다. 이렇게 하면 시간이 절약됩니다. 이름을 지정할 필요가 없으며 지정한 클래스 이름을 기억하면서 스타일을 지정하기 위해 스타일시트로 이동해야 합니다. 요소와 붐의 이름을 지정하면 스타일이 완료됩니다.

이것은 당신의 스타일이 독특하다는 것을 의미합니다. 결국 CSS를 사용하는 것입니다. 당신은 CSS를 더 잘하게 되고 당신의 마음은 그 CSS 영역에 있습니다.

부트스트랩과 달리 모든 사이트가 '부트스트래피'로 보입니다. TailwindCSS를 사용하면 시간을 벌면서 완전히 창의적으로 제어할 수 있습니다.

미리 정의된 클래스 이름을 기억하기만 하면 됩니다. Tailwind 문서가 훌륭하기 때문에 쉽습니다. 그들은 좋은 검색 기능을 가지고 있습니다. 한두 개의 프로젝트 후에 알게 될 것입니다.

설정



nextjs + Airtable로 앱을 만든 여기tutorial에서 만든 앱의 스타일을 지정하겠습니다. 이것을 먼저 따를 필요가 없습니다.



튜토리얼은 선택 사항입니다. create-next-app를 상용구로 사용하는 간단한 앱입니다. 당신이 좋아하는 것을 사용하십시오.

개발 의존성 설치


npm install --save-dev tailwindcss postcss-preset-env
Tailwind에는 구성 파일이 필요합니다.
npx tailwindcss init
이제 tailwind.config.js 파일이 생성된 것을 볼 수 있습니다. 다음과 같이 작성해야 합니다.

module.exports = {
  future: {
    // removeDeprecatedGapUtilities: true,
    // purgeLayersByDefault: true,
    // defaultLineHeights: true,
    // standardFontWeights: true
  },
  purge: [],
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}


다른 파일을 추가해야 합니다. postcss.config.js 파일을 추가합니다. 다음을 추가하십시오.

module.exports = {
  plugins: ['tailwindcss', 'postcss-preset-env'],
}


마지막 단계는 스타일 시트에 순풍을 추가하는 것입니다.

@tailwind base;
@tailwind components;
@tailwind utilities;


이제 TailwindCSS에 액세스할 수 있어야 합니다. 확인하기 위해 스타일 시트에 스타일을 추가할 수 있습니다. 스타일시트에서 tailwind를 사용하려면 @apply 다음에 tailwind 클래스 이름을 사용합니다. 예를 들어:

// globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-pink-500;
}

_app.js 페이지에서 스타일 시트에 액세스할 수 있는지 확인하십시오.

// app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp


참고: 서버를 다시 시작해야 했습니다.

앱은 이제 다음과 같아야 합니다.



사악하다. 다음에 수정하겠습니다. Tailwind가 기본 스타일을 어떻게 제거했는지 확인하세요. 목록에는 더 이상 글머리 기호가 없으며 머리글에는 더 이상 스타일이 지정되지 않습니다. Tailwind는 작업할 빈 서판을 제공합니다.

분홍색 배경을 제거하고 스타일을 지정하려는 파일로 이동합니다.

인덱스 페이지의 스타일을 지정하겠습니다. 이렇게 생겼습니다.

import Head from 'next/head';
import marked from 'marked';
import getPosts from '../lib/getPosts';

export default function Home({ posts }) {
  return (
    <div>
      <Head>
        <title>Godin style blog demo</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <main>
        <h1>Godin style blog demo</h1>
        <ul>
          {posts.map(post => (
            <li key={post.id}>
              <h3>{post.fields.title}</h3>
              <time>{post.fields.published}</time>
              <div
                dangerouslySetInnerHTML={{
                  __html: marked(post.fields.content),
                }}
              />
            </li>
          ))}
        </ul>
      </main>
    </div>
  );
}


화면 중앙에 멋지게 콘텐츠를 배치하고 싶습니다. 이렇게 하려면 tailwind 클래스container mx-auto max-w-xl를 추가합니다.

<main className='container max-w-xl mx-auto'>




마법. 클래스 이름을 추가하고 그에 따라 스타일이 지정됩니다.
<h1>가 크고 대담했으면 합니다.

        <h1 className='text-5xl font-extrabold'>Godin style blog demo</h1>


당신은 아이디어를 얻고 있어야합니다.

사용 중인 앱에서 블로그 목록의 스타일을 지정해야 합니다. 이를 위해 className의 .markdown와 global.css 내의 스타일을 제공할 것입니다.

 <ul className='markdown'>
          {posts.map(post => (
            <li key={post.id}>
              <h3>{post.fields.title}</h3>
              <time>{post.fields.published}</time>
              <div 
                dangerouslySetInnerHTML={{
                  __html: marked(post.fields.content),
                }}
              />
            </li>
          ))}
        </ul>




@tailwind base;
@tailwind components;
@tailwind utilities;

.markdown h3 {
  @apply font-bold text-2xl text-red-500;
}

.markdown time {
  @apply text-gray-500;
}




더 나은. 스타일리시한 블로그가 있습니다. 우리가 할 수 있는 일이 많습니다. 그러나 이것은 좋은 출발점입니다. Tailwind는 제 작업 흐름을 개선했으며 사용하는 즐거움이 있습니다.

Nextjs + TailwindCSS는 위험한 콤보입니다.

연결하자



트위터에 연결 -
Java 파충류 원클릭 결과 및 Excel로 저장
excel에 기둥 모양 그림 삽입

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage