vscode + tailwind InteliSense 설정

vscode에 tailwind extention을 설치해보자.

Tailwind CSS IntelliSense를 설치한다.

Ctrl + Shipt + P 에서 Open User Setting(Json) 을 찾아서 연다.

1. 리액트에서 자동완성 적용하기

위에서 연 설정 파일을 수정한다.

{
	...

    "files.associations": {
        ...
        "*.css": "tailwindcss"
    },
    "editor.quickSuggestions": {
        "strings": true
    }
    ...
}

2. 리액트 네이티브에서 사용하기

마찬가지로 설정 파일을 수정한다.

{
	...
    "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)", // tw`...`
    "tw=\"([^\"]*)", // <div tw="..." />
    "tw={\"([^\"}]*)", // <div tw={"..."} />
    "tw\\.\\w+`([^`]*)", // tw.xxx`...`
    "tw\\(.*?\\)`([^`]*)" // tw(Component)`...`
    ],
    ...
}

그리고 루트에 tailwind.config.js 파일을 추가해야 적용된다.
파일 내용은 비어있어도 무관하다.

출처: Using Tailwind in React Native