react-native 에서 tailwind 문법으로 스타일 적용하기 (twrnc 라이브러리)

https://www.npmjs.com/package/twrnc
https://github.com/jaredh159/tailwind-react-native-classnames

twrnc

• react-native 에서 tailwind css 문법으로 스타일링 가능
• 매우 빠름: 이 벤치마크 에 따르면 모든 RN 스타일링 라이브러리 중 가장 뛰어난 성능을 보입니다 .

 

인텔리센스 설정

React Native - Tailwind CSS autocomplete in VSCode for twrnc package
https://stackoverflow.com/questions/71681367/react-native-tailwind-css-autocomplete-in-vscode-for-twrnc-package

 

tailwind.config.js 파일을 반드시 만들어줘야 합니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}"
  ],
}

vs-code settings.json 설정 변경

"tailwindCSS.classAttributes": [
 "class",
  "className",
  "ngClass",
  "class:list",
  "style" // 추가
],

"tailwindCSS.experimental.classRegex": [
  ["tw`([^`]*)`", "[`'\"]([^'\"]*)[`'\"]"],
  ["tw=\"([^\"]*)\"", "[`'\"]([^'\"]*)[`'\"]"],
  ["tw={\"([^\"]*)}\"", "[`'\"]([^'\"]*)[`'\"]"],
  ["tw\\.\\w+`([^`]*)`", "[`'\"]([^'\"]*)[`'\"]"],
  ["tw\\(.*?\\)`([^`]*)`", "[`'\"]([^'\"]*)[`'\"]"],
  ["tw.style\\(([^)]*)\\)", "'([^']*)'"]
]

 

내용 추가 예정...