tailwindcss 사용법 알아보기

사이트에서 소개하는 tailwindcss

css framework입니다. 

html 요소에 간단한 word로 요소에 스타일을 줄 수 있게해 줍니다.

깡 css로만 프로젝트 하나를 완성시켜 봐서 알지만 추천할 만한 방법이 아닙니다.

UI-component나 tailwindcss같은 css framework를 사용하는 것을 추천합니다.

생산성과 유지보수를 위해서!

 

tailwindcss의 사용법입니다.

설치

tailwindcss 설치

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

 

CRACO(Create React App Configuration Override)

babel, postcss, lint 커스텀 설정을 craco.config.js파일에서 설정할 수 있다.

npm install @craco/craco

설정

./caraco.config.js 설정

module.exports = {
    style: {
        postcss: {
            plugins: [require("tailwindcss"), require("autoprefixer")],
        },
    },
};

./package.json 설정

./src/index.css 생성

// ./src/index.css

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

// ...

다음, ./src/App.tsx에 ./src/index.css를 import 한다.

./tailwindcss.config.js 생성

// ./tailwind.config.js
module.exports = {
    purge: ["./src/**/*.{,ts,tsx}", "./public/index.html"],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

 

발생한 버그

원인

create-react-app으로 생성한 프로젝트는 postCss8을 지원하지 않는다. 그래서 발생한다.

해결방법

문서에 보면, 해결 방법을 제시해 준다.

다음을 터미널에 프로젝트 홈 경로에서 입력하면 된다.

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9