Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/TVke/react-native-tailwindcss
A react-native style system based on TailwindCSS
https://github.com/TVke/react-native-tailwindcss
react-native tailwindcss
Last synced: 3 months ago
JSON representation
A react-native style system based on TailwindCSS
- Host: GitHub
- URL: https://github.com/TVke/react-native-tailwindcss
- Owner: TVke
- License: mit
- Created: 2018-12-26T16:10:40.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-26T11:06:13.000Z (about 3 years ago)
- Last Synced: 2024-07-18T18:01:19.141Z (4 months ago)
- Topics: react-native, tailwindcss
- Language: JavaScript
- Homepage: https://tvke.github.io/react-native-tailwindcss/
- Size: 1010 KB
- Stars: 565
- Watchers: 6
- Forks: 34
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-tailwindcss - A react native styling system based on TailwindCSS. (Components / Styling)
- awesome-tailwindcss - react-native-tailwindcss - React Native typing system. (Tools)
- awesome-react-native - react-native-tailwindcss - A react native styling system based on TailwindCSS. (Components / Styling)
- awesome-react-native - react-native-tailwindcss - A react native styling system based on TailwindCSS. (Components / Styling)
README
# react-native-tailwindcss [](https://github.com/TVke/react-native-tailwindcss/releases) [](https://www.npmjs.com/package/react-native-tailwindcss) [](https://tvke.github.io/react-native-tailwindcss)
## A react-native styling system, based on [TailwindCSS](https://tailwindcss.com/docs/what-is-tailwind/)
Easily apply styles to react native components in a tailwindCSS-like fashion.
The utility classes are transformed to valid object names and are all children of an object ( `t`, `tw`, `theme` or `tailwind`).
```jsx harmony
import { t } from 'react-native-tailwindcss';
```
Use the `tailwind.config.js` file you know and love, to customize your styles or just use default tailwind styles.
In react native, sometimes you only need a color value. We've got you covered.
The `color` object contains all your defined colors.
```jsx harmony
import { color } from 'react-native-tailwindcss';
```
React native has no default css styling so there are some *special cases*.
Some elements like breakpoints, plugins, corePlugin disabling, prefixes, separators, variation and the important toggle are not necessary and are ignored.
You should also take a look at some special cases:
- [separator handling (`-m-5` and `w-1/5`)](#general-conventions)
- [shadows](#shadows)
- [directional layout](#directional-layout)
- [more details](https://tvke.github.io/react-native-tailwindcss/special-cases.html)
## Usage
Install this package
```
# Using npm
npm install react-native-tailwindcss
# Using Yarn
yarn add react-native-tailwindcss
```
Then initialize a new tailwindCSS config file
```
npx RNtailwindcss
```
or use an existing one.
## Usage with `styled-components`
`react-native-tailwindcss` plays nicely with the popular [`styled-components` library](https://styled-components.com/docs/basics#react-native).
Simply use the array syntax within the interpolated template literal:
```jsx harmony
import { Text, View } from 'react-native';
import { t } from 'react-native-tailwindcss';
import styled from 'styled-components/native';
const SView = styled(View)`
${[t.mB4, t.bgGray200, t.rounded, t.p3]}
`;
Some unstyled text in a styled view
```
## General Conventions
Every 'class' uses the *camelCase* naming convention instead of tailwindCSS's *kebab-case*.
```
border-t-2 => t.borderT2
```
A `-` in the beginning of a 'class' becomes a `_`.
```
-mt-2 => t._mT2
```
A `/` also becomes a `_` to separate the numbers.
```
w-1/3 => t.w1_3
```
- [more information in the docs](https://tvke.github.io/react-native-tailwindcss/translations.html)
## Special cases
### Shadows
- Android does not use the shadow props to cast shadows, just an `elevation` value.
- The `elevation` value is by default the `shadowRadius / 2`
- It can be changed by adding the `elevation` value after the shadow separated by a `,`.
(eg.: `default: '0 1px 3px 0 rgba(0, 0, 0, .1), 5'`)
- Text shadows use the same shadows as box shadows
- Multiple shadows are not supported in React native. (the first shadow will be used)
- `inner` and `outline` shadows are ignored
### Directional Layout
When you need directional layout, React Native offers some variations to make life easier.
Instead of using 'left' or 'right', 'start' and 'end' can be used.
`react-native-tailwindcss` offers classes to embrace this way of directional layout.
Every 'class' with `L` or `R`, also has a corresponding `S` and `E` 'class' for start and end.
## Testing
```
npm run test
```