Using Tailwind in React Native

Introduction

Tailwind CSS has given us a lot of freedom in how we design web components. As a result, it has gained widespread acceptability among developers and IT enterprises.

Tailwind CSS is a highly flexible, low-level, utility-first CSS framework for creating user interfaces quickly.

React Native combines the greatest aspects of native development with React, a world-class JavaScript library for developing user interfaces.

Library required

Tailwind React Native Classnames (twrnc) v2. Please check the Library (twrnc) docs For:

• Installation
• API
• Customization
• Enabling Device-Context Prefixes
• Taking Control of Dark Mode
• Customizing Breakpoints
• Adding Custom Classes
• Matching Conditional Prefixes
• JIT-style Arbitrary Values
• Migrating from V1

npm install twrnc

Tips When Using Tailwind in React Native

Intellisense

For VSCode you can add intellisense by customising the config of Tailwind CSS IntelliSense through the following options:

• Option 1: Adding a custom Regex pattern to the settings.json

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

• Option 2: You could also add style in the extensions under TailwindCSS extension Tailwind CSS IntelliSense in VS Code Settings (UI)

Refrences

Tailwind intellisense support #78
Tailwind React Native Classnames 🏄‍♂️