tailwind 초기설정

 

 

익스텐션

---

Tailwind CSS IntelliSense 설치

tailwind는 많은 css at-rules를 사용하고 있는데 

(@tailwind, @apply, @screen)

많은 에디터에서 워닝이나 에러를 띄운다. 

 

해결방법은 Tailwind CSS IntelliSense를 설치하는 것.

자동완성, 린팅 자동완성, 문법 하이라이팅등의 기능을 제공.

 

 

 

프리티어

---

tailwind-prettier-plugin설정

 

yarn add prettier-plugin-tailwindcss

 

자동으로 클래스를 소팅해 주는 플러그인. 

 

prettier.config.cjs설정

 

// prettier.config.cjs

module.exports = {
  plugins: [require("prettier-plugin-tailwindcss")],
}

 

 

 

 

tailwind.config.ts설정 

---

 

Next.js에서 Tailwind CSS 시작하기

 

 

 

autoprefixer

---

 

css코드에 벤더 프리픽스를 자동으로 추가 해 줌

현재 postcss.config.js에 설정된 것만으로도 사용가능

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

 

 

기본 browsers list는 

 

{
  "browserslist": [
    "chrome 64",
    "edge 79",
    "firefox 67",
    "opera 51",
    "safari 12"
  ]
}

 

다음과 같으며 따로 설정하고 싶으면 package.json에 설정 가능 

Architecture: Supported Browsers | Next.js

 

 

 

유틸리티 클래스

---

 

커스텀하게 설정 

export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        "gray-20": "#F8F4EB",
        "gray-50": "#EFE6E6",
        "gray-100": "#DFCCCC",
        "gray-500": "#5E0000",
        "primary-100": "#FFE1E0",
        "primary-300": "#FFA6A3",
        "primary-500": "#FF6B66",
        "secondary-400": "#FFCD5B",
        "secondary-500": "#FFC132",
      },
      backgroundImage: {
        "gradient-yellowred": "linear-gradient(90deg, #FF616A 0%, #FFC837 100%)",
        "mobile-home": "url('./assets/(파일명).png')"
      },
      fontFamily: {
        dmsans: ["DM Sans", "sans-serif"],
        montserrat: ["Montserrat", "sans-serif"]
      },
      content: {
        evolvetext: "url('./assets/(파일명).png')",
        abstractwaves: "url('./assets/(파일명).png')",
        sparkles: "url('./assets/(파일명).png')",
        circles: "url('./assets/(파일명).png')",
      },
    },
    screens: {
      xs: "480px",
      sm: "768px",
      md: "1060px",
    }
  },
  plugins: [],
};

 

 

 

사용

 

const ActionButton = ({ children, setSelectedPage }: Props) => {
  return (
    <AnchorLink
      className="bg-secondary-500 hover:bg-primary-500 hover:text-white"
      onClick={() => setSelectedPage(SelectedPage.ContactUs)}
      href={`#${SelectedPage.ContactUs}`}
    >
      {children}
    </AnchorLink>
  );
};

export default ActionButton;

 

 

 

tailwind css 설치 및 적용

 

 

purge css

---

 

tailwind설치를 하였으면 기본적으로 설정이 되어있으므로 

작동이 되지 않은 경우 설치하면 됨 .

html파일에 사용된 클래스만 빌드되어 

css 파일의 크기를 줄여주는 역할을 함 

(사용되지 않는 css는 번들사이즈 증가, 개발시 혼란, 사이트의 core web vitals에 안좋은 영향을 줌 )

 

 

 

 

PurgeCSS

Removing unused CSS with PurgeCSS

 

Editor Setup - Tailwind CSS

tailwind css 설치 및 적용

 

core web vitals

Core Web Vitals 및 Google 검색결과 이해하기 | Google 검색 센터  |  문서  |  Google for Developers

 

postcss

My PostCSS Setup for Next.js Projects