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
stylein the extensions under TailwindCSS extension Tailwind CSS IntelliSense in VS Code Settings (UI)
Refrences
Tailwind intellisense support #78
Tailwind React Native Classnames 🏄♂️
Top comments (5)
Might be worth mentioning that after option 1 or 2, the intellisense still won't work if there is no
tailwind.config.jsortailwind.jspresent in the root of the project.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.
It is working using
tailwind.config.jsfileHi, Did you create the file manually or you generated following tailwin doc?
style={tw.style("text-green-500")}
Currently the format of using tailwind class is this. How to get suggestions in vscode for this format?