[React] Tailwindcss, Styled Components 연동

https://www.npmjs.com/package/tailwind-styled-components

tailwind-styled-components

위의 사이트 내용을 토대로 작성하였음

 

1-1) 설치 방법

npm i -D tailwind-styled-components

 

1-2) 테스트

import tw from "tailwind-styled-components"

const Container = tw.div`
  w-full 
  h-32
  bg-red-300
`;

const Navbar = () => {
  return (
    <>
      <Container />
    </>
  )
};

export default Navbar;

해당 코드가 잘 작동하는지 테스트해보자.

 

 

2-1) 설치를 한 후에, 비쥬얼 스튜디오 코드를 사용중이라면 다음의 익스텐션도 설치

> Tailwind CSS IntelliSense

 

 

2-2) https://code.visualstudio.com/docs/getstarted/settings

Visual Studio Code User and Workspace Settings

위의 URL을 확인 후 json파일에 다음과 같이 밑에 추가로 해당 내용을 넣어주자.

"tailwindCSS.includeLanguages": {
    "typescript": "javascript", // if you are using typescript
    "typescriptreact": "javascript"  // if you are using typescript with react
},
"editor.quickSuggestions": {
    "strings": true // forces VS Code to trigger completions when editing "string" content
},
"tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)", // tw`...`
    "tw\\.[^`]+`([^`]*)`", // tw.xxx<xxx>`...`
    "tw\\(.*?\\).*?`([^`]*)" // tw(Component)<xxx>`...`
]

 

2-3) 밑에 처럼 자동완성이 되는지 확인