DEV Community

Nwanguma Victor
Nwanguma Victor

Posted on • Updated on

Using Tailwind in React Native


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


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\\(.*?\\)`([^`]*)" // 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


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

Top comments (5)

idebeijer profile image

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.

anatugreen profile image

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.

golgothaaksanti profile image
Golgotha Aksanti • Edited

It is working using tailwind.config.js file

anatugreen profile image
Anaturuchi • Edited

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

globalfreetech profile image
Bhavik Kalariya • Edited


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