How to Use Tailwind with React Native | Beginner Tutorial 2022

Writing a StyleSheet object for every little view gets old fast. With the tailwind-rn library you get Tailwind's utility-first workflow inside React Native, so styling a component is as quick as typing text-white px-6. I set up everything in the video, from install to dark mode.

What's inside

• Installing tailwind-rn in a fresh Expo project
• Applying classes like text-center and text-sky-500 straight on components
• Dark mode with conditional classes like dark:text-slate-400
• Responsive styles that adapt by screen size, like sm:px-6
• Reusable components so you never repeat the same class strings
• How tailwind-rn strips unused CSS to keep bundles lean

Resources

CourseReact Native course

Go deeper in the Style & Design section: 80 minutes on design systems, dark mode, and Flexbox.