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
Related
I'm styling my inputs inside Chakra UI's extendTheme function however I'm struggling to style an input that has been autocompleted. Using the :autofill pseudo selector doesn't seem to have any bearing because the browser (Chrome) has its own styles set with !important which forces the input's background colour to be white.
const theme = extendTheme({
components: {
Input: {
baseStyle: {
field: {
bg: "gray.700",
color: "gray.300",
_hover: {
bg: "gray.500",
},
_focus: {
bg: "gray.500",
},
// This does not work
_autofill: {
bg: "gray.500",
}
}
}
}
}
})
Just incase anyone has the same issue, I couldn't figure out how to override the default browser background-color, so instead I gave it a box-shadow value that creates a similar effect. Box-shadow is not set by the browser's autofill styles so this works well for my case.
const theme = extendTheme({
components: {
Input: {
baseStyle: {
field: {
bg: "gray.700",
color: "gray.300",
_hover: {
bg: "gray.500",
},
_focus: {
bg: "gray.500",
},
_autofill: {
border: "1px solid transparent",
textFillColor: "#c6c6c6",
boxShadow: "0 0 0px 1000px #232323 inset",
transition: "background-color 5000s ease-in-out 0s",
},
}
}
}
}
})
As TommyR's answer explains, this is currently broken in Chakra UI.
However, this does work in variants.
A somewhat clean fix would be to create a variant for this, and set it as a defaultProp:
Input: {
variants: {
backgroundFix: {
field: {
bg: "green.500",
},
},
},
defaultProps: {
variant: "backgroundFix",
},
},
If wanted, you could extend other existing variants, like so:
Input: {
variants: {
outlineBackgroundFix: (props) => ({
field: {
...defaultTheme.components.Input.variants.outline(props).field,
bg: props.colorMode === "light" ? "white" : "gray.800",
},
}),
},
defaultProps: {
variant: "outlineBackgroundFix",
},
},
If I understand correctly, the reason that Input background styles are not applied via baseStyles is that styles for variants override baseStyles, and each variant sets background (often to 'transparent'). As such, I don't think this is a bug, and is alluded to in a callout in the docs:
Pro tip 💡: If you're looking for a list of parts of a multipart component you can check it by clicking on the "View theme source" button at the top of the documentation page for that certain component.
https://chakra-ui.com/docs/styled-system/component-style#styling-multipart-components
To override the variant's default theme, you can define just the parts you want to change, which will be merged with the default styles for the variant.
Check the source for Input: https://github.com/chakra-ui/chakra-ui/blob/%40chakra-ui/react%402.4.2/packages/components/theme/src/components/input.ts#L115
HT to previous answers for pointing the way!
const variantFilled = {
field: {
bg: "red.500", // merged with the default styles for `filled`
/* // default styles:
border: "2px solid",
borderColor: "transparent",
bg: mode("gray.100", "whiteAlpha.50")(props),
_hover: {
bg: mode("gray.200", "whiteAlpha.100")(props),
},
_readOnly: {
boxShadow: "none !important",
userSelect: "all",
},
_invalid: {
borderColor: getColor(theme, ec),
},
_focusVisible: {
bg: "transparent",
borderColor: getColor(theme, fc),
},
*/
},
addon: {
/*
border: "2px solid",
borderColor: "transparent",
bg: mode("gray.100", "whiteAlpha.50")(props),
*/
},
};
export const theme = extendTheme({
components: {
Input: {
variants: { filled: variantFilled },
},
},
});
If you need access to props to toggle mode:
Docs: Component Style > Styling multipart components
import { inputAnatomy } from "#chakra-ui/anatomy";
import { createMultiStyleConfigHelpers, extendTheme } from "#chakra-ui/react";
import { mode } from "#chakra-ui/theme-tools"
const { definePartsStyle } = createMultiStyleConfigHelpers(inputAnatomy.keys);
const variantFilled = definePartsStyle((props) => ({
field: {
bg: mode("gray.100", "whiteAlpha.50")(props),
}
}))
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')
],
}
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 have a Vue3 application with Tailwinds configured in tailwind.config.js
Is it possible to dynamically change the value of a preconfigured class from tailwind.config.js ?
For example:
tailwind.config.js:
const defaultTheme = require("tailwindcss/defaultTheme");
module.exports = {
purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
base: {
DEFAULT: "#6e0147",
},
},
fontFamily: {
sans: ["Interstate", "Inter var", ...defaultTheme.fontFamily.sans],
},
},
},
variants: {
extend: {
ringWidth: ["hover", "active"],
ringColor: ["hover", "active"],
ringOpacity: ["hover", "active"],
ringOffsetWidth: ["hover", "active"],
ringOffsetColor: ["hover", "active"],
},
},
plugins: [],
};
VueComponent.vue :
<template>
<div class="text-base">text here</div>
</template>
<script>
export default {
.....
mounted(){
tailwind.config.colors.base = "#00000" // change tailwind color of class somehow
}
}
</script>
In your tailwind.css add a CSS variable called --text-color-base (you could add multiple) in the base theme and also in theme-1:
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base{
:root{
--text-color-base:#6e0147;
}
.theme-1{
--text-color-base:#000000;
}
}
in tailwind.config.js extend the textColor field in the theme option with skin key which will contain the different variable for your text color :
theme: {
extend: {
textColor:{
skin:{
base:"var(--text-color-base)"
}
},
colors: {
base: {
DEFAULT: "#6e0147",
},
},
fontFamily: {
sans: ["Interstate", "Inter var", ...defaultTheme.fontFamily.sans],
},
},
then you could use it like class="text-skin-base", to apply the theme-1 add the class theme-1 to the root element like :
<div class="theme-1">
<h1 class="text-skin-base">text here</h1>
...
</div>
then in your script you could bind the root class to a property and you update in the script :
<div :class="myTheme">
<h1 class="text-skin-base">text here</h1>
...
</div>
<script>
export default {
.....
data(){
return{
myTheme:''
}
},
mounted(){
this.myTheme="theme-1"
}
}
</script>
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: [],
}