Comments (11)
There is an added support for dark
theme, it's a prefix that is generated for every color combination. Would that be supported ?
from tailwind-rn.
Sorry for radio silence everyone. I'm working on a major release now in v4
branch, which is going to support the latest Tailwind 3.x with JIT out of the box.
from tailwind-rn.
I am guessing this is because the library would need to somehow identify if the device is in dark mode enabled and/or one has manually opted to show dark mode classes.
In react native I see that you could identify if the user has dark mode enabled with:
import { useColorScheme } from 'react-native';
const isDarkMode = useColorScheme() === 'dark';
So I'm guessing one could do some tricks to workaround this.
from tailwind-rn.
If somebody is interessted. I use this with a custom TailwindProvider
and custom useTailwind()
hook which checks the current appearance of the device and switches between tailwindLight
and tailwindDark
.
Disclaimer: I use classnames
as a dependency to support additional scenarios. Feel free to remove it.
import React from 'react';
import {useColorScheme} from 'react-native-appearance';
import classnames from "classnames";
import {create} from 'tailwind-rn';
import styles from './../../styles.json';
const tw = create({...styles});
const tailwindLight = (...classNames) => {
const names = classnames(classNames)
.split(' ')
.filter(style => !style.startsWith('dark:'))
.join(' ');
return tw.tailwind(names);
}
const tailwindDark = (...classNames) => {
// take all non-dark styles first
const classNamesDefault = classnames(classNames)
.split(' ')
.filter(style => !style.startsWith('dark:'))
.join(' ')
// filter all dark-styles to "append" so they can overwrite the light-styles.
const classNamesDark = classnames(classNames)
.split(' ')
.filter(name => name.startsWith('dark:'))
.map(name => name.replace('dark:', ''))
.join(' ');
return tw.tailwind(classNamesDefault + ' ' + classNamesDark);
}
const TailwindContext = React.createContext({isDark: false, tailwind: () => {}});
export const TailwindProvider = ({children}) => {
const colorScheme = useColorScheme();
const [isDark, setIsDark] = React.useState(colorScheme === "dark");
React.useEffect(() => {
setIsDark(colorScheme === "dark");
}, [colorScheme]);
return <TailwindContext.Provider value={{tailwind: isDark ? tailwindDark : tailwindLight}}>
{children}
</TailwindContext.Provider>
};
// Export useTailwind() hook,which will give the correct tailwind function depending on the appearance
export const useTailwind = () => React.useContext(TailwindContext).tailwind;
And finally use it almost the same way as before
const FlatListItem = () => {
const tailwind = useTailwind();
return <Text style={tailwind('text-black dark:text-white')}>This is a test</Text>
}
from tailwind-rn.
Hi everyone, Tailwind 3.0 is now supported with a fresh v4.0.0 release of tailwind-rn
! There's also support for responsive design, dark mode, custom configuration and more!
from tailwind-rn.
Thanks! Haven't looked into it yet, but this project should of course support the new 2.0 version.
from tailwind-rn.
Here's the release notes, fwiw:
https://blog.tailwindcss.com/tailwindcss-v2
from tailwind-rn.
@vadimdemedes need any help getting this project to support 2.0?
from tailwind-rn.
@JamesGelok looks like it is since 3.0
https://github.com/vadimdemedes/tailwind-rn/releases/tag/v3.0.0
from tailwind-rn.
@JamesGelok looks like it is since 3.0
https://github.com/vadimdemedes/tailwind-rn/releases/tag/v3.0.0
tried running a dark:bg-black
or anything with dark
prefix doesnt seem to work
from tailwind-rn.
Hi everyone, Tailwind 3.0 is now supported with a fresh v4.0.0 release of
tailwind-rn
! There's also support for responsive design, dark mode, custom configuration and more!
Thanks for pushing out a new release! Going to play with it this week ❤️
from tailwind-rn.
Related Issues (20)
- [question] how to custom the theme of app? HOT 1
- [question] how to set the root font size? HOT 1
- How to use tailwind imports with react native- can tailwind be shortened to tw HOT 1
- Custom classes missing some styles HOT 1
- Blur support
- Typescript error: Property 'children' does not exist on type 'IntrinsicAttributes & Props' (TailwindProvider) HOT 1
- Error: Failed to parse declaration "textDecorationLine: overline"
- Does this work?
- Is TailwindCSS component available with this library?
- Can we have space-between ? HOT 1
- Unsupported Tailwind class, not responding on rect native HOT 5
- Unable to see changes after installation HOT 1
- Fix children prop type HOT 2
- Custom theme unknown or invalid utility HOT 1
- Bug: 'taildinwcss@latest' is not in this registry. HOT 1
- Is it possible to use prettier-plugin-tailwindcss with tailwind-rn? HOT 2
- Support react-native 0.71 gap proprety HOT 2
- npx create-tailwind-rn has stopped woprking for v3.0.1 HOT 1
- Adding optional "children" property to the TailwindProvider interface, to avoid TypeScript error. HOT 3
- is it possible to use it in react native storybook?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tailwind-rn.