base styles and plugin support

[tyrauber]

What is the API for implementing plugins and base styles? For example, configuring dark mode by adding a base style class. Tailwindcss documentation suggests something like this:

const plugin = require('tailwindcss/plugin')
module.exports = {
  darkMode: 'class',
  plugins: [
    plugin(function({ addBase, theme }) {
      addBase({
        light: {
          color: "#000",
          backgroundColor: "#fff"
        },
        dark: {
          color: "#fff",
          backgroundColor: "#000"
        }
      })
    })
  ],
  ....

Unfortunately, running npx tailwind-react-native@latest build doesn't export those new styles to style.json.

Also, something I noticed through this process, tailwindcss isn't included as a dependency? I was curious why that was.

[ajsmth]

hey! I don't have anything implemented for this but i'm curious what your trying to accomplish - what should the output of the plugin above be in styles.json?

tailwind isn't a dependency because I don't use any of the code from that codebase, just the idea and some basic defaults! tldr - tailwind-rn reads the css output from tailwindcss and tries to convert it to styles.json, this library instead takes tailwindcss theme configurations and generates styles.json, with some additions that are unique to RN

[tyrauber]

hi @ajsmth, I just wanted to add custom style declarations without editing style.json directly. I've taken to creating a secondary json file for custom declarations and passing both to the tailwind-react-native create method. The problem with that approach is that the secondary file cannot leverage the constant declarations in the first. I (wrongly) assumed that since it was called tailwind-react-native it was using the tailwindcss library as a dependency and therefore tailwindcss configuration documentation would hold true.

In this library, what would the approach be to adding say dark mode.

[ajsmth]

ah I see - sorry for the confusion. selectors like dark mode don't make a ton of sense in RN since we lack the media queries - but there is useColorScheme which can be used in conjunction with variant: https://github.com/ajsmth/tailwind-react-native#variants--selectors