Як використовувати Tailwind CSS з Expo або React Native

Tailwind CSS — це популярний фреймворк CSS, орієнтований на утиліти, який спрощує стилізацію, надаючи заздалегідь визначені класи утиліт. Хоча він переважно розроблений для веб-додатків, ви можете досягти схожої функціональності в Expo чи React Native, використовуючи інструменти, як-от Tailwind RN або NativeWind, які привносять стилізацію, подібну до Tailwind, в React Native.

У цьому блозі ми проведемо вас через налаштування та використання фреймворку, подібного до Tailwind, в Expo проекті.

Крок 1: Налаштування Expo проекту

Спочатку переконайтесь, що у вас встановлений Expo CLI. Якщо ні, ви можете встановити його за допомогою:

npm install -g expo-cli

Тепер створіть новий Expo проект:

expo init tailwind-expo  
cd tailwind-expo

Крок 2: Встановлення залежностей

Щоб використовувати Tailwind CSS в React Native, встановіть наступне:

1. Tailwind RN: Tailwind RN — це популярна бібліотека, яка надає підмножину класів Tailwind CSS для React Native.

npm install tailwind-rn npm install --save-dev tailwindcss

1. NativeWind (Альтернатива): NativeWind — це більш просунута бібліотека з кращою сумісністю для Tailwind CSS.

npm install nativewind npm install tailwindcss

1. Для NativeWind також встановіть babel-plugin для React Native:

npm install --save-dev babel-plugin-nativewind

Крок 3: Налаштування Tailwind CSS

1. Згенеруйте файл tailwind.config.js:

npx tailwindcss init

1. Змініть файл tailwind.config.js, щоб включити лише класи, необхідні для React Native. Наприклад:

module.exports = { content: ['./App.{js,jsx,ts,tsx}', './screens/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'], theme: { extend: {}, }, plugins: [], };

1. (Необов'язково для Tailwind RN): Скомпілюйте вашу конфігурацію в JSON:

npx tailwindcss -o tailwind.json

1. Tailwind RN використовує цей JSON файл для відображення класів у стилі React Native.

Крок 4: Налаштування Babel для NativeWind

Якщо ви використовуєте NativeWind, оновіть конфігурацію Babel у файлі babel.config.js:

module.exports = function (api) {  
 api.cache(true);  
 return {  
 presets: ['babel-preset-expo'],  
 plugins: ['nativewind/babel'],  
 };  
};

Крок 5: Використання класів Tailwind у компонентах

Використання Tailwind RN

1. Імпортуйте утиліту tailwind:

import { tailwind } from 'tailwind-rn'; import tailwindConfig from './tailwind.json'; // Якщо скомпільовано як JSON

1. Застосуйте стилі до ваших компонентів:

import { Text, View } from 'react-native'; export default function App() { return (  Hello, Tailwind RN!  ); }

Використання NativeWind

1. Імпортуйте компоненти, сумісні з NativeWind:

import { View, Text } from 'react-native';

1. Використовуйте імена класів безпосередньо як пропси:

export default function App() { return (  Hello, NativeWind!  ); }

Крок 6: Запуск вашого проекту

Запустіть сервер розробки, щоб побачити ваш стильований додаток:

npm start

Переваги використання Tailwind з React Native

1. Послідовність: Використовуйте знайому синтаксис Tailwind у веб- та мобільних проектах.
2. Швидкість: Створюйте інтерфейси швидше за допомогою заздалегідь визначених класів утиліт.
3. Підтримка: Чистіший код з меншою кількістю вбудованих стилів.

Порівняння бібліотек, подібних до Tailwind

| Функція | Tailwind RN | NativeWind |
| --- | --- | --- |
| Легкість у використанні | Потрібне відображення JSON. | Пряме використання класів. |
| Кастомізація | Обмежено мапованими класами. | Повні функції Tailwind. |
| Продуктивність | Легкий. | Трохи важчий, але потужний. |

Висновок

Використання стилів, подібних до Tailwind, в Expo чи React Native — це справжня революція для розробників, які люблять підхід utility-first в CSS.
Обидві Tailwind RN та NativeWind забезпечують зручний досвід, спрощуючи процес стилізації компонентів React Native ефективно. Виберіть інструмент, який найкраще підходить вашому робочому процесу та потребам проекту.

Щасливого кодування! 🎉

Перекладено з: How to Use Tailwind CSS with Expo or React Native