DEV Community

Victor Nwanguma πŸ‘¨β€πŸš€
Victor Nwanguma πŸ‘¨β€πŸš€

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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)`...`
]
Enter fullscreen mode Exit fullscreen mode
  • Option 2: You could also add style in the extensions under TailwindCSS extension Tailwind CSS IntelliSense in VS Code Settings (UI)

Tailwind CSS IntelliSense VS Code Settings


Refrences

Tailwind intellisense support #78
Tailwind React Native Classnames πŸ„β€β™‚οΈ

Discussion (3)

Collapse
idebeijer profile image
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.

Collapse
golgothaaksanti profile image
Golgotha Aksanti • Edited on

It is working using tailwind.config.js file

Collapse
globalfreetech profile image
Bhavik Kalariya • Edited on

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

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