[React Native] TailwindCSS IntelliSense 활성화하기 (VS Code)

TailwindCSS IntelliSense 활성화하기 (VS Code)

들어가며

• VS Code에서 리액트 네이티브(React Native)를 이용하여 애플리케이션을 만들 때, TailwindCSS IntelliSense를 활성화 시키는 방법을 정리해본다.

 

방법

(1) Tailwind CSS IntelliSense 확장 설치하기

• VS Code에서 Tailwind CSS IntelliSense 확장을 설치한다.

Tailwind CSS IntelliSense - Visual Studio Marketplace

 

(2) Tailwind CSS 설치하기 (tailwind-react-native-classnames)

• 리액트 네이티브에서 Tailwind CSS를 사용하려면 다음의 패키지를 설치해줘야 한다.

$ npm install tailwind-react-native-classnames

 

React Native에서 TailwindCSS 사용하기

import { View, Text } from 'app/design-system';

export function HelloWorld() {
  return (
    <View tw="flex-1 justify-center items-center bg-white dark:bg-black">
      <Text tw="text-black dark:text-white">
        Hello, World!
      </Text>
    </View>
  );
}

 

(3) VS Code 설정 파일(Settings.json) 수정하기

• @[Ctrl/Cmd]@ + @[Shift]@ + @[P]@ 를 클릭하여 명령 팔레트를 실행한 후, @Preferences: Open User Settings (JSON)@을 클릭한다.

 

• 아래의 내용을 추가해준다.

Settings.json

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

 

(4) 테일윈드CSS 설정 파일(tailwind.config.js) 수정하기

• 프로젝트 최상단 경로에 테일윈드 CSS 설정 파일(@tailwind.config.js@) 파일의 내용을 아래와 같이 작성해준다.
  • 설정 파일이 없을 경우 새로 추가해준다.
  • 이 파일은 반드시 있어야 한다.

 

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

참고 사이트

Tailwind intellisense/auto-complete support · jaredh159 tailwind-react-native-classnames · Discussion #124