This repository was archived by the owner on Sep 20, 2022. It is now read-only.
Repository navigation
This repository was archived by the owner on Sep 20, 2022. It is now read-only.
base styles and plugin support #6
Description
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.
Activity
ajsmth commentedon May 28, 2021
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 commentedon May 29, 2021
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 commentedon May 29, 2021
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
useColorSchemewhich can be used in conjunction withvariant: https://github.com/ajsmth/tailwind-react-native#variants--selectors