Tailwind has started acting up on my latest project and after hours of debugging I can't figure out what's happening.
When I have this:
<div class='fixed bottom-0 right-6 sm:relative sm:block'>
The div is always fixed, regardless of the screen size. In this:
<div class='hidden sm:flex'>
OR
<div class='hidden sm:block'>
The div is always hidden, regardless of the screen size.
However, for borders and text-colors responsiveness works. Is that expected behavior?
This is my tailwind.config.js
module.exports = {
purge: [
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
darkMode: false, // or 'media' or 'class'
theme: {
fontFamily: {
'mont': 'Montserrat',
'open': 'Open Sans',
'roboto': 'Roboto',
'lato': 'Lato',
},
extend: {
colors: {
'xmas-red': '#b71a3b',
'xmas-dark-red': '#7e0f12',
'xmas-brown': '#bc6d4c',
'xmas-olive': '#6a7045',
// 'xmas-gray': '#313c33',
'xmas-gray': '#364739',
'xmas-blue': '#072b54'
},
width: {
'124': '60rem',
},
height: {
'100': '36rem'
}
},
},
variants: {
extend: {
opacity: ['disabled'],
backgroundColor: ['disabled'],
borderColor: ['disabled'],
textColor: ['disabled'],
},
},
plugins: [
require('#tailwindcss/forms')
],
}
Related
For example, let's say I want to use the following markdown
# AAAAAAAAAa
BBBBBBB
which would be parsed accordingly such that AAAAAAAAAa is h1 and BBBBBB is <p>, and all of this is enclosed with a prose div in using Tailwind Typography. Under normal circumstances, the two would share the same font defined in tailwind.config.js, and I am wondering how I can change this setting such that the two would have different fonts.
There are examples on the link you provided. Take a look at Customization and Modifiers.
You can directly add property to certain element (h1,h2,h3,p, etc). See example below:
// tailwind.config.js
module.exports = {
theme: {
extend: {
typography: {
DEFAULT: {
css: {
color: '#333',
h1: {
fontFamily: ['Roboto', 'sans-serif'],
},
p: {
fontFamily: ['Montserrat', 'sans-serif'],
},
},
},
}
},
},
plugins: [
require('#tailwindcss/typography'),
// ...
],
}
or you can create your own modifier like this:
// tailwind.config.js
module.exports = {
theme: {
extend: {
typography: {
'3xl': {
css: {
fontSize: '1.875rem',
h1: {
fontSize: '4rem',
fontFamily: ['Montserrat', 'sans-serif'],
},
p: {
fontSize: '1.5rem',
fontFamily: ['Roboto', 'sans-serif'],
},
// ...
},
},
},
}
},
plugins: [
require('#tailwindcss/typography'),
// ...
],
}
A simple demo.
I want to customize gridTemplateColumns section of my Tailwind theme config.But then it does work.
I want to set
grid-template-columns: 100px auto 100px;
and it was set in tailwindcss as follow,but it didn't work;
<div className='grid grid-cols-revolution ...'>
<div></div>
...
...
</div>
tailwind.config.js
module.exports = {
purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
gridTemplateColumns: {
'revolution': '100px auto 100px',
}
},
},
variants: {
extend: {},
},
plugins: [],
}
In my Material UI theme, I've defined the styles for each variant:
const theme = createMuiTheme({
palette: {
primary: {
main: "#1dc0d7",
},
secondary: {
main: "#c9c9c9",
dark: "#505255",
},
},
typography: {
allVariants: {
color: "#505255",
},
body1: {
fontSize: '1em',
},
body2: {
lineHeight: 1.25,
},
subtitle2: {
fontWeight: 'bold',
},
h1: {
fontSize: '2.4em',
},
h6: {
fontSize: '1.25em',
},
},
});
However, for some odd reason, my "h1" variant CSS rule is being overridden by another rule, and I have no idea where it comes from:
Any ideas?
I'm trying TailwindCSS for the first time, and it seems I can't use breakpoints for box-shadows. All the others breakpoints are working fine except for the box-shadow.
Btw, I'm using a custom box-shadow.
HTML:
<div
class="w-auto h-screen pl-10 mt-20 pt-12 absolute left-0 top-0 bg-gray-900 shadow-menu md:shadow-none"
>
tailwind.config.js:
module.exports = {
theme: {
fontFamily: {
base: ["Quicksand", "sans-serif"],
title: ["Belgrano", "serif"]
},
extend: {},
boxShadow: {
menu: "0 3px 5px rgba(0,0,0,0.2)"
}
},
variants: {},
plugins: []
};
You have to enable Pseudo-Class Variants for boxShadow in your tailwind.config.js like this:
boxShadow: ['responsive', 'hover', 'focus']
This will allow you to tweak boxShadow based on responsive classes, hover or focus.
Your tailwind.config.js will look like this:
module.exports = {
theme: {
fontFamily: {
base: ["Quicksand", "sans-serif"],
title: ["Belgrano", "serif"]
},
extend: {},
boxShadow: {
menu: "0 3px 5px rgba(0,0,0,0.2)"
}
},
variants: {
boxShadow: ['responsive', 'hover', 'focus']
},
plugins: []
};
I hope this helps.
Resources https://tailwindcss.com/docs/pseudo-class-variants/#app
I am trying to change the color of the all the Button's in the project by overriding the theme css. The color of the button has changed but hover color is still transparent, how can I override it ?
Is there any other way to this apart from adding a class to each of my buttons.
Also shouldn't all the variants of a button follow the css of the root?
const theme = createMuiTheme({
palette: {
primary: {
light: '#35C37D',
main: '#35C37D',
dark: '#35C37D',
// contrastText: will be calculated to contrast with palette.primary.main
},
secondary: {
light: '#35C37D',
main: '#35C37D',
// dark: will be calculated from palette.secondary.main,
contrastText: '#35C37D',
},
// error: will use the default color
},
overrides: {
MuiButton: {
// Name of the rule
root: {
// Some CSS
background: 'rgba(53, 195, 125, 100)',
borderRadius: 0,
border: 0,
colorInherit: '#fff',
color: 'white',
height: 40,
padding: '0 30px',
boxShadow: '4px 9px 26px 0 rgba(16,124,71,0.10)',
'&:hover': {
textDecoration: 'none',
backgroundColor: '#35C37D',
// Reset on touch devices, it doesn't add specificity
'#media (hover: none)': {
backgroundColor: '#35C37D',
},
},
},
textPrimary: {
color: '#fff',
},
textSecondary: {
color: '#fff',
},
contained: {
color: '#fff',
},
containedPrimary: {
color: '#fff',
},
containedSecondary: {
color: '#fff',
},
raised: {
color: '#fff',
},
colorInherit: {
color: '#fff',
},
},
},
typography: {
fontFamily: 'azo-sans-web',
// The default font size of the Material Specification.
fontSize: 14, // px
fontWeightLight: 300,
fontWeightRegular: 400,
fontWeightMedium: 500,
// Tell Material-UI what's the font-size on the html element.
// 16px is the default font-size used by browsers.
htmlFontSize: 16,
},
});
I figured it out.
Here is the code sandbox if anyone cares https://codesandbox.io/s/y2qyk9rn4x
Just need to add this for each variant:
outlined: {
"&:hover": {
backgroundColor: "#35C37D"
}
},