리액트에서 tailwindcss 사용하기. 그런데 styled-components를 곁들인.

저는 리액트에서 주로 styled-components를 이용해서 스타일링을 하고 있습니다.

스타일링에 항상 자신이 없어서 이번에 tailwindcss를 써봤는데, 반응형도 처리하기 쉽고 생각보다 편리하더군요.

그래서 styled-components + tailwindcss 를 사용한 세팅 방법을 기록하기 위해 작성합니다.

저 두가지에 추가적으로 twin.macro 라는 라이브러리를 사용했는데요.
이 라이브러리는 styled-components 안에서 tailwindcss를 작성할 수 있게 도와줍니다. 짱짱

설치

tailwindcss 설치

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

craco 설치

yarn add @craco/craco

package.json 수정하기

//package.json 파일 수정
{
    // ...
    "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
      "eject": "react-scripts eject"
    },
  }

craco.config.js 파일 생성하기

// craco.config.js 파일 생성
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

tailwind.config.js 파일 생성하기

// tailwind.config.js 파일 생성
module.exports = {
    // 빌드할 때 사용되지 않는 클래스는 제거됩니다. : 최적화
    purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

index.css에 아래 코드 추가하기

/* ./src/index.css에 코드 추가 */
@tailwind base;
@tailwind components;
@tailwind utilities;

styled-components 설치하기

yarn add styled-components

twin.macro 설치하기

yarn add twin.macro

 

VSCODE EXTENSION

추가적으로 vscode extension 중에 Tailwind CSS IntelliSense 를 설치하면 코딩 속도를 올릴 수 있습니다.

그리고 위 extension을 twin.macro를 이용해 styled-components 안에서 적용시키기 위해선 추가적인 작업을 해줘야하는데요.
vscode settings.json 파일을 열고 아래 내용을 추가해줍니다.

"editor.quickSuggestions": {
    "strings": true
  },
  "editor.autoClosingQuotes": "always",
  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)", // tw`...`
    "tw=\"([^\"]*)", // <div tw="..." />
    "tw={\"([^\"}]*)", // <div tw={"..."} />
    "tw\\.\\w+`([^`]*)", // tw.xxx`...`
    "tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
  ],
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  },

 

사용법

제가 사용하고 있는 방법은 아래와 같습니다.
무엇보다 반응형을 저렇게 편하게 할 수 있다는게 감동이었습니다..

import styled from 'styled-components';
import tw from 'twin.macro';

const Container = styled.div`
  ${tw`
        w-full
        flex
        flex-col
        items-center
        pt-3
        pb-3 
        md:mt-10
        lg:mt-36
        md:pl-24
        md:pr-24
    `}
`;

ref:
https://tailwindcss.com/docs/guides/create-react-app

https://github.com/ben-rogerson/twin.macro/discussions/227