I am writing plugin to add custom styles in TailwindCSS, but I am a bit confused with values of theme(). I don't know how to see all the theme values to apply my base styles. How do I know where it is?
module.exports = {
// ...
plugins: [
plugin(function ({ addBase, addComponents, addUtilities, theme }) {
addBase({
'h1': {
fontSize: theme('fontSize.2xl'), // need to see more fontSize and properties, where I can see it?
},
'h2': {
fontSize: theme('fontSize.xl'),
},
})
}
]
}
Related
I would like to add translate-z-[] utility class to my tailwindcss classes so I could use parallax scrolling effects with perspective and translateZ, is there a way to generate these classes (add something like --tw-translate-z variable at the end on tailwinds transform class)?
Yes, you can create plugins for custom utilities
You config should have something like this
const plugin = require('tailwindcss/plugin');
module.exports = {
theme: {},
plugins: [
plugin(function({ matchUtilities, theme }) {
matchUtilities(
{
'translate-z': (value) => ({
'--tw-translate-z': value,
transform: ` translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))`,
}), // this is actual CSS
},
{ values: theme('translate'), supportsNegativeValues: true }
)
})
],
}
DEMO
I'm using Mui5 with SC and I have issues with overriding theme base values.
I have base theme like this for base mui components, for example:
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: "1.75rem",
color: "red",
}
}
}
}
});
And now I like to extend the base button with custom colors like this with SC:
const StyledButton = styled(Button)(({ theme }: { theme: Theme }) => {
return {
fontFamily: theme.xxx,
color: "green"
};
});
This is not working, only the theme defaults are applied.
What's wrong with the implementation or what I'm missing?
BR,
Are you using any other package such as material-ui.
Are all your packages also up to date and have these installed:
"#emotion/css": "^11.9.0",
"#emotion/react": "^11.9.3",
"#emotion/styled": "^11.9.3",
"#mui/material": "^5.9.1",
"#mui/styled-engine": "^5.8.7",
"#mui/styles": "^5.9.1",
how can I reproduce the following scss using a plugin?
.large-title {
font-family: $font-family-2;
#apply leading-none;
color: $large-title-color;
#apply uppercase;
#apply text-xl;
// I don't know how to add these in the plugin
#apply sm:text-2xl;
#apply md:text-3xl;
#apply lg:text-4xl;
#apply xl:text-5xl;
}
in my config file, I currently have:
module.exports = {
[...]
plugins: [
require('#tailwindcss/forms'),
plugin(function({ addBase, config }) {
addBase({
'.large-title': {
fontFamily: [config('theme.fontFamily.family-2')],
fontSize: config('theme.fontSize.xl'),
lineHeight: config('theme.lineHeight.none'),
color: config('theme.colors.primary.900'),
textTransform: 'uppercase',
},
})
})
],
}
The only thing missing is I can't find out how to add the responsive size changes from the class in the plugin.
One way to add #media queries to a class in Tailwind's CSS-in-JS syntax is nesting:
addBase({
'.large-title': {
'#media (min-width: 500px)': {
fontSize: theme('fontSize.xl'),
}
},
})
Additionally, user's breakpoints can be accessed using the theme() function:
const sm = theme('screens.sm', {})
Combining these two snippets you could:
const sm = theme('screens.sm', {})
addBase({
'.large-title': {
`#media (min-width: ${sm})`: {
fontSize: theme('fontSize.xl'),
}
},
})
One caveat to be aware of in case you're building this plugin for public use is that a user may entirely change their theme.screens config. If a user removes the theme.screens.sm key from their configurations, for example, the snippet above would no longer work.
I am trying to customize the colors in withAuthenticator HOC aws-amplifier login screen.
I followed:
https://aws-amplify.github.io/docs/js/authentication#using-components-in-react
and also read:
https://medium.com/#coryschimmoeller/customizing-the-authentication-experience-of-amplifys-withauthenticator-e6f2089ff469
import { AmplifyTheme } from 'aws-amplify-react';
const myTheme = {
...AmplifyTheme,
BackgroundColor: { color: 'blue',backgroundColor: 'blue' },
button: { color: 'blue',backgroundColor: 'blue' },
amazonSignInButton: { color: 'blue',backgroundColor: 'blue' },
signInButton: { backgroundColor: 'blue' , color: 'blue'}
};
...
//export default App;
export default withAuthenticator(App, myTheme );
amplify still renders the AWS default look and feel. I doesn't make any difference what I put in myTheme, looks like as if it is ignored completely.
Thanks for any feedback in advance.
You need to adress the different elements like so:
import { AmplifyTheme } from "aws-amplify-react";
const authTheme = {
...AmplifyTheme,
sectionHeader:{
...AmplifyTheme.sectionHeader,
color:"red",
},
formSection: {
...AmplifyTheme.formSection,
backgroundColor: "green",
},
sectionFooter: {
...AmplifyTheme.sectionFooter,
backgroundColor: "purple"
},
button: {
...AmplifyTheme.button,
backgroundColor: "blue"
}
}
export default withAuthenticator(App, { theme: authTheme });
If you are not sure about the names of the different elements you can look them up in the developer console of your browser. It´s a bit tedious but i haven´t found a documentation so far
Taken from the documentation:
Web
const MyTheme = {
signInButtonIcon: { 'display': 'none' },
googleSignInButton: { 'backgroundColor': 'red', 'borderColor': 'red' }
}
<Authenticator theme={MyTheme} />
Web components reference
React Native
import { AmplifyTheme } from 'aws-amplify-react-native';
const MySectionHeader = Object.assign({}, AmplifyTheme.sectionHeader, { background: 'orange' });
const MyTheme = Object.assign({}, AmplifyTheme, { sectionHeader: MySectionHeader });
<Authenticator theme={MyTheme} />
React Native components reference
Since the question is about withAuthenticator specifically, the previous examples apply to that too:
export default withAuthenticator(App, false, [], null, MyTheme);
I am using React with TypeScript and Material UI. So I have the the following layout
<MuiThemeProvider theme={muiTheme}>
<My Component/>
</MuiThemeProvider>
And then in my component I have something similar to
let styles: any = ({ palette }: any) => ({
root: {
marginTop: 10
}
});
export default withStyles(styles)(MyComponent);
What would be the preferred way to go if I want to share the root class among multiple components? Can I extend Material UI theme when I am creating it using createMuiTheme?
Any advise will be highly appreciated
Here is how I define my custom theme in Material-ui
const Theme = createMuiTheme({
typography: {
fontSize: 18,
},
palette: {
primary: {
light: '#40bbbf',
main: '#032B43',
dark: '#0b777b',
},
},
customCommonClass: {
textAlign: center,
},
})
Theme.overrides = {
MuiListItemIcon: {
root: {
marginRight: 0,
},
},
MuiListItem: {
dense: {
paddingTop: '4px',
paddingBottom: '4px',
},
},
}
There are 3 parts within this creation:
the first I will define some defaults of my theme (for the fontSize, and palette color as an example)
The second I create some global class customCommonClass that I can use in all styled components down the road (your question)
I override some class of the material ui components.
hope this can help