[리액트] tailwindcss style components 하는 설치방법

테일윈즈 스타일 컴포넌트 설치하는 방법

 

테일윈즈를 쓰다보면 편리하기는 한데 코드가 지저분해지는 현상이 생긴다

이럴 때 테일윈즈 스타일 컴포넌트를 사용해주면 편할 것 같아서 자주 사용하려고 한다

 

설치방법은 아래와 같다

 

 

npm i -D tailwind-styled-components

 

터미널에 테일윈드 컴포넌트를 설치해준다

 

 

import React from "react";
import tw from "tailwind-styled-components";

const Container = tw.div`
    flex
    items-center
    justify-center
    flex-col
    w-full
    bg-indigo-600
`

render(
    <Container>
        <div>Use the Container as any other React Component</div>
    </Container>
)

이렇게 사용하면 된다

 

 

 

 

VSCode에서 아래와 같은 코드를 설정해주는 것은 해도 되고 안해도 되는 옵션사항이다

설치해주면 테일윈드가 자동으로 뜨기 때문에 편하게 사용할 수 있다

 

• On Windows/Linux - File > Preferences > Settings
• On macOS - Code > Preferences > Settings

"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>`...`
]

https://code.visualstudio.com/docs/getstarted/settings

Visual Studio Code User and Workspace Settings

 

 

 

 

 

 

 

 

 

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

tailwind-styled-components

여기에 자세히 설명이 되어있다