Use Tailwind in React Native projects the same way you would in a React project.
eg.
<Section className="bg-black">
<Paragraph className="text-white">
Write code like this in React Native...
</Paragraph>
</Section>
This package is in its early stages and is experimental. PR's, issues, and thoughts welcome. As always, proceed with caution.
Installation
yarn add react-native-tailwind-classnames
'react-native-tailwind-classnames` depends on styled components, you will need to install it separately
Usage
This package depends on styled components and a tailwind.config.js file in your project. The first step is seting up a helper function (handleClassnames):
import setUpTailwind from 'react-native-tailwind-classnames'
import {theme} from './tailwind.config'
const {handleClassnames} = setUpTailwind(theme)
Passing the tailwind configuration into setUpTailwind returns a function that we will use on a styled component to handle the className prop:
const Section = styled.View`
${handleClassnames}
`
Our styled component (<Section>) now has support for Tailwind classes derived from the projects tailwind.config.js file.
<Section className="p-12 bg-gray-500">
{/* etc */}
</Section>
All together, this is the simplest example of usage:
import React from 'react';
import styled from 'styled-components/native';
import setUpTailwind from 'react-native-tailwind-classnames';
import {theme} from './tailwind.config';
const {handleClassnames} = setUpTailwind(theme);
const Paragraph = styled.Text`
${handleClassnames}
`
const Section = styled.View`
${handleClassnames}
`;
const App = () => {
return (
<Section className="p-12 bg-gray-500">
<Paragraph className="text-white">My section!</Paragraph>
</Section>
)
}
export default App;
Alternatives:
There are many alternatives out there, if this package doesn't serve your needs I encourage you to try these out:
VSCode Intellisense:
One of the main reasons for this particular way of approaching Tailwind in RN is to get the nice developer experience that the Tailwind CSS IntelliSense package provides. The only additional step to get this package to work is installing the tailwindcss package:
npm install tailwindcss
or
yarn add tailwindcss
Sample tailwind.config.js with all working properties
Click to `tailwind.config.js`!
module.exports = {
theme: {
colors: {
white: 'white',
'gray-500': '#a4a0ac',
black: 'black',
// blues
'blue-500': '#1d54ef',
// purples
'purple-500': '#4b3e8c',
// greens
'green-500': '#12795e',
// oranges
'orange-500': '#cf4a20',
// reds
'red-500': '#d64040',
transparent: 'rgba(255, 255, 255, 0)',
},
spacing: {
px: 1,
0: 0,
4: 4,
8: 8,
12: 12,
16: 16,
24: 24,
32: 32,
40: 40,
48: 48,
'1/2': '50%',
'3/4': '75%',
'2/3': '66%',
full: '100%',
auto: 'auto',
},
fontFamily: {
sans: 'MuseoSans-300',
sansSemiBold: 'MuseoSans-500',
sansBold: 'MuseoSans-700',
sansExtraBold: 'MuseoSans-900',
},
fontSize: {
jb: 40,
xl: 24,
lg: 20,
md: 18,
sm: 16,
xs: 14,
},
height: theme => ({
...theme('spacing'),
}),
lineHeight: {
xs: 1.3,
sm: 1.42,
md: 1.55,
lg: 1.6,
xl: 1.15,
jb: 1.15,
},
margin: (theme, {negative}) => ({
...theme('spacing'),
}),
padding: theme => theme('spacing'),
width: theme => ({
...theme('spacing'),
}),
borderRadius: {
full: '9999px',
sm: '4px',
md: '5px',
lg: '8px',
},
borderColor: theme => ({
...theme('colors'),
}),
borderWidth: {
default: '1px',
'2': '2px',
'6': '6px',
},
opacity: {
'0': '0',
'20': '0.2',
'40': '0.4',
'60': '0.6',
'100': '1',
},
inset: {
'0': '0',
full: '100%',
auto: 'auto',
},
boxShadow: {
sm: '0px 7px 7px rgba(0, 0, 0, 0.14);',
md: '0px 4px 44px rgba(5, 5, 6, 0.36);',
},
// elevation keys must match boxShadow keys! the `shadow-<value>` class will automatically set elevation
elevation: {
// @TODO figure out shadows
sm: 0,
md: 0,
card: 0,
},
zIndex: {
under: -1,
bottom: 0,
low: 1,
middle: 10,
top: 100,
},
},
variants: {
alignItems: [],
alignSelf: [],
backgroundColor: [],
borderRadius: [],
borderColor: [],
borderStyle: [],
borderWidth: [],
boxShadow: [],
display: [],
flex: [],
flexDirection: [],
fontFamily: [],
fontStyle: [],
fontSize: [],
height: [],
inset: [],
justifyContent: [],
margin: [],
overflow: [],
opacity: [],
padding: [],
position: [],
textAlign: [],
textColor: [],
textDecoration: [],
textTransform: [],
width: [],
zIndex: [],
},
corePlugins: {
alignContent: false,
appearance: false,
backgroundAttachment: false,
backgroundPosition: false,
backgroundRepeat: false,
backgroundSize: false,
borderCollapse: false,
cursor: false,
fill: false,
flexGrow: false,
flexShrink: false,
flexWrap: false,
float: false,
fontSmoothing: false,
fontWeight: false,
letterSpacing: false,
lineHeight: false,
listStylePosition: false,
listStyleType: false,
maxHeight: false,
maxWidth: false,
minHeight: false,
minWidth: false,
objectFit: false,
objectPosition: false,
order: false,
outline: false,
placeholderColor: false,
pointerEvents: false,
resize: false,
stroke: false,
tableLayout: false,
userSelect: false,
verticalAlign: false,
visibility: false,
whitespace: false,
wordBreak: false,
preflight: false,
accessibility: false,
container: false,
transformOrigin: false,
transitionDuration: false,
transitionTimingFunction: false,
transitionProperty: false,
translate: false,
rotate: false,
scale: false,
},
}
TODO
- Custom padding, margin, width, height, etc..
- Negatives
- Clean up README
