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 🏄‍♂️

Comments

[idebeijer]

Might be worth mentioning that after option 1 or 2, the intellisense still won't work if there is no tailwind.config.js or tailwind.js present in the root of the project.

[Anaturuchi]

Thanks for this. I followed the Option 2 and it did not work until I manually created a tailwind.js in my project root folder. Works Nice now.

[Golgotha Aksanti]

It is working using tailwind.config.js file

[Anaturuchi]

Hi, Did you create the file manually or you generated following tailwin doc?

[Bhavik Kalariya]

style={tw.style("text-green-500")}

Currently the format of using tailwind class is this. How to get suggestions in vscode for this format?