Tailwind 2.0 about tailwind-rn

[aswinmohanme]

There is an added support for dark theme, it's a prefix that is generated for every color combination. Would that be supported ?

[vadimdemedes]

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.

[johhansantana]

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.

[christoph-kluge]

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>
}

[vadimdemedes]

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!

[vadimdemedes]

Thanks! Haven't looked into it yet, but this project should of course support the new 2.0 version.

[Natetronn]

Here's the release notes, fwiw:

https://blog.tailwindcss.com/tailwindcss-v2

[JamesGelok]

@vadimdemedes need any help getting this project to support 2.0?

[dillingham]

@JamesGelok looks like it is since 3.0
https://github.com/vadimdemedes/tailwind-rn/releases/tag/v3.0.0

[johhansantana]

@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

[beeman]

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 ❤️