I am looking to extend the margin style and add the variant ['even'] to it.
I can add the variant like so:
module.exports = {
variants: {
margin: ['even'],
},
theme: {
...
}
}
It is my understanding that the above will override the margin styles default variants.
The documentation here shows the ability to extend a variant as to not remove all the defaults when adding the new variant (discussed more here).
I have tried this and not been successful:
module.exports = {
variants: {
extend: {
margin: ['even'],
},
},
theme: {
...
}
}
I must be doing something wrong or have a typo?
The reason I was unable to do this was because of my tailwindcss version being below 2.0. As #Jon suggested. Thanks! 2.0 release notes.
Related
I'm trying to customize the Tailwind Typography plugin, as follows:
typography (theme) {
return {
DEFAULT: {
css: {
'code::before': {
content: 'none', // don’t generate the pseudo-element
//content: '""', // this is an alternative: generate pseudo element using an empty string
},
'code::after': {
content: 'none'
},
code: {
color: theme('colors.slate.700'),
fontWeight: "400",
backgroundColor: theme('colors.stone.100/30'),
borderRadius: theme('borderRadius.DEFAULT'),
borderWidth: '1px',
paddingLeft: theme('spacing[1.5]'),
paddingRight: theme('spacing[1.5]'),
paddingTop: theme('spacing[0.5]'),
paddingBottom: theme('spacing[0.5]'),
},
}
},
invert: {
css: {
code: {
color: theme('colors.slate.100'),
backgroundColor: theme('colors.slate.800'),
borderColor: theme('colors.slate.600'),
}
}
}
}
},
How can I apply a color value to backgroundColor - based on one of the built in colors, with with opacity applied? For example colors.slate.800 / 50 (which doesn't work)
This is a tricky one. The problem is theme function will return HEX value for colors - it simply gets value from resolved configuration in dot notation. So theme('colors.red.500/300') is not valid (at least for now. I think it worth to open PR or Discussion)
All you need to solve the problem is to convert HEX to RGB. There are two Tailwind's ways I know but of course you're free to use any similar approach
First one - convert using Tailwind's withAlphaVariable function. It accepts an object with CSS property, color name and variable name.
const withAlphaVariable = require('tailwindcss/lib/util/withAlphaVariable')
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
// This will create CSS-like object
// you should destruct and override CSS-variable with desired opacity
const proseCodeBgColor = withAlphaVariable({
color: theme('colors.red.500'), // get color from theme config
property: 'background-color',
variable: '--tw-my-custom-bg-opacity', // could be any
})
return {
DEFAULT: {
css: {
code: {
...proseCodeBgColor,
'--tw-my-custom-bg-opacity': '.3', // opacity
},
}
},
}
}
},
},
plugins: [
require('#tailwindcss/typography')
],
}
Second one much simplier - use #apply directive. Pass desired Tailwind's utilities as a key and empty object as a value
module.exports = {
theme: {
extend: {
typography: ({theme}) => {
return {
DEFAULT: {
css: {
code: {
// you may pass as much utilities as you need eg `#apply bg-red-500/30 text-lg font-bold`: {}
'#apply bg-red-500/30': {},
},
}
},
}
}
},
},
plugins: [
require('#tailwindcss/typography')
],
}
Worth to mention you can customize code background as utility prose-code:bg-blue-500/50
<div class="prose prose-code:bg-blue-500/50">
<code>
npm install tailwindcss
</code>
</div>
DEMO
I have several custom utilities configured in my tailwind.config.cjs file this:
plugins: [
plugin(({ addUtilities }) => {
const utilities = {
'.border-invalid': {
border: '1px solid #ef4444',
},
[...]
};
addUtilities(utilities);
}),
],
I also have defined custom colors, like this
extend: {
colors: {
'red-50': '#FEF2F2',
[...]
'red-500': '#EF4444',
[...]
}
}
Instead of having the hard-coded value in my custom utility, I'd like to reference my custom color, so that if I ever change my color palette my custom utilities would be updated accordingly. So, ideally, it would be something like this:
const utilities = {
'.border-invalid': {
apply: 'border border-solid border-red-500',
},
Or some way to reference red-500 in my custom utility instead of the hard-coded #EF4444.
Is there a way to achieve it?
#ihar-aliakseyenka answer workes great, I added this just to tell that the second alternative, border: "1px solid theme('colors.red-500')" even show a nice and clear css definition when flying with the mouse over:
While the first option, border: 1px solid ${theme('colors.red-500')}` just show the literarl value (as expected, btw):
You may use theme() directive
plugins: [
plugin(({ addUtilities, theme }) => { // extract theme
const utilities = {
'.border-invalid': {
border: `1px solid ${theme('colors.red-500')}`, // concatenate
}
};
addUtilities(utilities);
}),
],
// or pass it as a string
plugins: [
plugin(({ addUtilities }) => {
const utilities = {
'.border-invalid': {
border: "1px solid theme('colors.red-500')",
}
};
addUtilities(utilities);
}),
],
Note: you set your color as red-500, so no dot notation will be available like theme('colors.red.500') (it will cause error. Well maybe not because Tailwind has red-500 color but in any other cases it will)
DEMO
Github discussion also opened here.
Demo of what I'm trying to accomplish.
How do you make any custom variants you create stack-able with the responsive variants?
I want my new variant to be able to be changed responsively, but the sm/md/lg don't seem to stack with any new variant that I create.
I know you can apply the responsive variants to any new utilities that you create with addUtility, but how do I make sure my custom variants can be changed responsively?
With this line you removed every single variants (even responsive) except for custom-checked. So change
variants: { scale: ['custom-checked'] }
to
variants: {
extend: {
scale: ['custom-checked']
},
},
It should do the trick. Full config will be
module.exports = {
variants: {
extend: {
scale: ['custom-checked']
},
},
plugins: [
plugin(({ addVariant, e }) => {
addVariant('custom-checked', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`custom-checked${separator}${className}`)}:checked`
})
})
}),
],
}
I modified my tailwind.config.js to add a new custom color:
module.exports ={
theme: {
extend: {
colors: {
pepegray: { DEFAULT: "#323232" },
}
}
}
}
Now I want my button to change color on hover.
<button className="h-2 w-2 rounded-full bg-silver hover:bg-pepegray m-0.5"></button>
But it doesn't work.
Funny thing is, if I write bg-pepegray it works. The only place it doesn't work is in the hover.
for the pepegray it should be mentioned in ''(quotes) as 'pepegray'.
in HTML mentioned it as 'hover:bg-pepegray-DEFAULT'
in tailwind.config.js
module.exports ={
theme: {
extend: {
colors: {
'pepegray': { DEFAULT: "#323232" },
}
}
}
}
<button className="h-2 w-2 rounded-full bg-silver hover:bg-pepegray-DEFAULT m-0.5"></button>
If there is no need to add a color pallete, you can remove object as a color value
module.exports ={
theme: {
extend: {
colors: {
pepegray: "#323232",
}
}
}
}
I got the same issue in Angular. I restarted the development server and then it seemed to take effect. Other colors seemed to work without restart. Strange.
Hello I am using Gulp for compiling and Tailwind as framework.
I would like to use Purgecss, it is working but it ignores my whitelist, some help?
Here the code example:
function css() {
const tailwindcss = require('tailwindcss');
return gulp.src('./src/assets/css/main.css')
.pipe(postcss([
require('precss'),
tailwindcss('./tailwind.config.js'),
require('autoprefixer')
]))
.pipe(purgecss({
content: ['./public/*.html'],
whitelist: ['px-4'],
whitelistPatterns: [/^bg-/, /^text-/],
}))
.pipe(gulp.dest('./public/assets/css/'))
.pipe(browserSync.stream());
}
Setting names have been renamed, use new names (safelist) and approach
purgecss safelist
const purgecss = new Purgecss({
content: [], // content
css: [], // css
safelist: {
standard: [/red$/],
deep: [/blue$/],
greedy: [/yellow$/]
}
})
Glad if it helped you ;)