Is there a way to get only the CSS value of a Tailwind CSS class? For example, if I have translate-x-4 tailwind class I want only the 1rem CSS value (since class translate-x-4 is --tw-translate-x: 1rem;). This would be pretty useful with Framer Motion, because framer motion animation object can accept a wide variety of CSS values like 1rem, #ff3322. Is there some kind of way to do something like this <motion.div animate={{ x: getValue('translate-x-4') }} initial={false} />.
I know there exists twin.macro but it "returns" entire Tailwind CSS class. Is there a similar utility for getting only the value?
I think xwind is what you are looking for.
import xw from "xwind";
const styles = xw`text-red-100 hover:text-green-100 hover:bg-blue-200`;
// OR (with custom array syntax)
const styles = xw`text-red-100 hover[text-green-100 bg-blue-200]`;
Xwind converts your tailwind classes into Postcss-js / JSS compatible syntax.
Something like this:
const styles = {
"--text-opacity": "1",
color: ["#fde8e8", "rgba(253, 232, 232, var(--text-opacity))"],
"&:hover": {
"--text-opacity": "1",
"--bg-opacity": "1",
color: ["#def7ec", "rgba(222, 247, 236, var(--text-opacity))"],
backgroundColor: ["#c3ddfd", "rgba(195, 221, 253, var(--bg-opacity))"],
},
};
I prefer to use vscode and enable extension Tailwind CSS IntelliSense. This way, when you hover over any tailwind classes you can see the complete CSS.
TailwindCSS has a function called resolveConfig that returns an object of the generated values. The theme attribute stores the css values. I used this in my React app as follows (at the top of my file):
import resolveConfig from "tailwindcss/resolveConfig";
const styleConfig = resolveConfig().theme;
styleConfig then is an object with things like backgroundColor, gap, etc.
Related
I'd like to use custom themes in Tailwind config to set primary/secondary colors for light and dark mode. The Tailwind docs only go over using classes in an html/jsx element like so:
<div class="bg-white dark:bg-slate-900...
Instead of declaring this on every element in my app, I'd like to do the following:
<div class="bg-primary text-secondary" />
and then in config, define something like:
colors: {
light: {
primary: "white",
secondary: "black",
}
dark: {
primary: "black",
secondary: "white",
}
}
Does anyone know of a way to do this? I am using Tailwind with React.
You can use #apply:
.bg-primary {
#apply bg-white dark:bg-slate-900
}
/* ... */
You can even go so far as to write a script to generate this CSS.
https://tailwindcss.com/docs/functions-and-directives
To anyone looking for answers in the future:
I was also looking for the same thing, and the best I think we can do at this point is:
Define colors in your tailwind config use css vars
in root/body have 2 sets of css vars. One default, and other for dark class
More information about setting tailwind config using css vars:
https://tailwindcss.com/docs/customizing-colors#using-css-variables
I actually found two solutions for this:
Daisy UI has a pretty good solution for this built in. However if you don't want to get stuck with using the entire component library, you can do what daisy is doing under the hood with:
Tailwind theme switcher
I have the following configuration in the antd.customize.less file:
#btn-primary-bg: #ffe900;
#btn-primary-color: #primary-color;
#btn-default-color: #primary-color;
#btn-default-bg: #ffffff;
On hovering a primary button everything is ok, but on hovering a default button the text color in the button changes to #btn-primary-bg, which I want to override, but I couldn't find any property like "#btn-default-hover-color" here. How can this be overridden, if at all?
I faced the same issue but I'm still looking for a better solution. However, for the moment, I can suggest that you add something like this to your global style file:
.ant-btn-default:hover, .ant-btn-default:focus {
border-color: #bee2e5;
color: #fff;
}
UPDATE
After antd has been updated to version 5.0.0 there is a prettier way to do it using ConfigProvider.
Let's suppose we have wrapped our App and assigned to the theme an object with parameters.
<ConfigProvider theme={{
components: {
Button: {
colorPrimaryBorderHover: 'red',
colorPrimaryHover: 'lightgray',
colorPrimary: 'red',
colorPrimaryActive: 'lightgray',
colorPrimaryTextHover: 'lightgray',
}
}
}}>
<App />
</ConfigProvider>
Acctually there are a lot of parameters to customize the appereance of your app which you can find in your
node_modules/antd/es/config-provider/context.d.ts file
However your config might be huge but to keep your code readable you might pass this object with interface of ThemeConfig as an exported value from another .ts file.
<ConfigProvider theme={myCustomTheme}>
...
Working with reassigning less variables. Thied to edit everything that connected with #primary-color, nothing changed color generated by Antd for hover/active state. Looks like there is no way to do this with less variables.
I can't seem to find in any of the Material-UI documentation where the "light", "dark" and "contrastText" properties of a PaletteIntention are applied or what they are used for? I know I can access them with hooks or HOC directly, but I am wondering if those variants are used in any of the built-in components automatically? This is probably obvious, so thanks in advance.
Yes, those theme values are used in MUI components.
The keyword PaletteIntention has only appeared in the document theme/palette/customization for explanation.
What it wants to say is that we can customize the theme default settings.
If we take a close look at the built-in component source like the most common one Button
Refer: the source of MUI Button
You can find that the default styles are using the theme
export const styles = (theme) => ({
/* Styles applied to the root element. */
root: {
...theme.typography.button,
boxSizing: 'border-box',
minWidth: 64,
padding: '6px 16px',
borderRadius: theme.shape.borderRadius,
color: theme.palette.text.primary,
transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
duration: theme.transitions.duration.short,
}),
Which is quite common. I mean, why not they use the style solution inside their own package?
The document may not list all the default style one component is using, still, we can see it inside the source, and we can always customize them via the CSS API document, or override them using the MUI nesting selector or other style solution provided by MUI with theme.
Refer: document of
MUI style solutions
MUI theming
customizing-components
advanced/#theming
I really love the shoutem theme library, but I'm finding it difficult to hook into the recursive INCLUDE that makes the underlying code work beautifully (See code+documentation here: https://github.com/shoutem/theme/blob/develop/src/Theme.js). For instance, if we have:
render() {
return (
<StyleProvider style={theme}>
<View />
</StyleProvider>
);
}
const theme = _.merge(getTheme(), {
'shoutem.ui.Text': {
color: 'green',
},
});
This simple text color change will work, but only for shoutem Text components. However, Heading, Title, Subtitle, etc. all of which pull from Text attributes in the shoutem library because of INCLUDE. The use of a simple _.merge(...) only overwrites the component itself, but not anything that it might subsequently affects. It sounds like I need to overwrite attributes higher up in the tree (e.g., Text), and then regenerate the theme so it affects all "children" that it's included in (e.g., Heading and Title). Using the publicly exposed API, is this possible to do somehow at the moment? Or are there any forks or utilities you're aware of that accomplish this with your library.
There is a text property in the root of the default shoutem ui theme that is included into all text elements (https://github.com/shoutem/ui/blob/develop/theme.js#L292). You should be able to accomplish your use case by simply overriding values from that property:
const theme = _.merge(getTheme(), {
text: {
color: 'green',
},
});
In case you want to create a more complex theme, you can use INCLUDE in your code as well. INCLUDE works by merging all values from top level theme properties it targets. You can use it to include properties from the base theme, and you can also include your own custom properties:
import { INCLUDE } from '#shoutem/theme';
const theme = _.merge(getTheme(), {
// Define a top level property to use in includes
largeText: {
fontSize: 20,
},
'shoutem.ui.Text': {
// Include a text property from the base theme
// and a largeText property defined above
[INCLUDE]: ['text', 'largeText'],
// Override the text color after all includes
// have been resolved
color: 'green',
},
});
Sometimes specific components define styles after INCLUDEs have been resolved, those styles have a higher priority, and will always override the style from INCLUDEs. To change those styles, you can use a createSharedStyle helper:
import { createSharedStyle } from '#shoutem/theme';
const textComponents = [
'shoutem.ui.Heading',
'shoutem.ui.Title',
'shoutem.ui.Subtitle',
'shoutem.ui.Text',
'shoutem.ui.Caption',
];
const theme = _.merge(getTheme(), {
...createSharedStyle(textComponents, {
color: 'green',
},
});
Finally, some more basic customizations can be done through theme variables, you can pass custom variables when calling getTheme(https://github.com/shoutem/ui/blob/develop/theme.js#L55-L144).
I'm trying to create some styles for my react component like this:
var styles = StyleSheet.create({
/*Pinout*/
/*GPIO Shapre*/
gpio_outer: {
background: '#222222',
borderRadius: 5,
height: 26,
width: 26,
},
})
I'm adding it like
After compiling the code and try to run on the browser I get this from the browser console:
TypeError: StyleSheet.create is not a function
Do you know what can be happening? Thanks in advance
StyleSheet is a part of React-Native, not a part of regular ReactJS. You can however instantiate a style object and use that like you would in RN.
render() {
const style = {
margin: '0.5em',
paddingLeft: 0,
listStyle: 'none'
};
return <ul style={style}>item</ul>;
}
A quick google search also led me to find a few react js libraries that give you the abstraction you're looking for.
Radium
react-style
Good info source
You should import StyleSheet correctly from react-native. You probably haven't written it correctly. Check this one:
import { View, Text, StyleSheet } from 'react-native';
Are you requiring StyleSheet properly?
You can try to check this tutorial https://www.toptal.com/ios/cold-dive-into-react-native-a-beginners-tutorial