I'm trying to create a variant in Tailwind file configuration.
What I would like to have is something like hover:border-l-4 hover:border-green-400, so a class that enables a border on the left (or only on top / bottom / right).
So I create this inside tailwind.config.js:
module.exports = {
purge: {
enabled: process.env.NODE_ENV === 'production',
content: ['./src/**/*.html', './src/**/*.{js,ts,jsx,tsx}'],
},
darkMode: false,
theme: {
extend: {
colors: {
...
},
},
borderLeft: (theme) => ({}),
...
},
variants: {
extend: {
borderLeft: ['hover', 'focus']
},
},
plugins: [],
}
It doesn't work. I get TypeError: variantsValue is not iterable.
I didn't find anything useful in the documentation page.
Checkout docs on tailwind.
variants: {
extend: {
borderWidth: ['hover'],
}
}
From here, hover:border-l-4 hover:border-green-400 will work.
Related
I have been working on a project with NextJS and Tailwind CSS.
I need to use the height class h-96 for a couple of components, but since it is not default-defined I decided to added it to my tailwind.config.js like this:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./ui/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
extend: {
height: {
'96': '24rem',
},
// https://vercel.com/design/color
colors: {
vercel: {
primaryGreen: '#92c700',
primaryBlue: '#111871',
primaryPurple: '#5c068c',
secondaryPurple: '#6d0793',
},
},
},
},
};
I was expecting to be able to use h-96 but it seems that the configuration in the tailwind.config.js file are not been applied to the project.
NOTE: I also tried to set the height like this:
height: {
96: '24rem',
},
since the linting auto-corrected it for me, but this didn't work either.
h-96 is already defined in the tailwind css classes. You can update the h-96 default value in the tailwind.config.js in the following way.
/** #type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
height: {
'96':'124rem'
}
// ...
},
},
plugins: [],
}
Also , if you are just using it for couple of components, you can also directly change the values in the components itself like h-[124rem].
More info here
Height 96 (h-96) is a default theme. Since you are attempting to override a default, you must add it directly under the theme tab because you are not 'extending' anything, but rather changing the default configuration.
Source: Here
Try this:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,jsx,tsx}',
'./ui/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
height: {
96: '24rem',
},
extend: {
// https://vercel.com/design/color
colors: {
vercel: {
primaryGreen: '#92c700',
primaryBlue: '#111871',
primaryPurple: '#5c068c',
secondaryPurple: '#6d0793',
},
},
},
},
};
i have some color defined in my tailwind configuration like so:
module.exports = {
content: [
...
],
safelist: [
{
pattern: /(bg|border|text)-(alpine|dacia|renault|nissan|bmw|mini|opel|toyota|volkswagen|citroen|kia|peugeot|ds|lexus)(\/10)?/,
variants: ['hover', 'focus'],
},
],
theme: {
...
extend: {
...
colors: {
...
alpine: '#056EB6',
renault: '#efdf00',
dacia: '#646b52',
nissan: '#c3002f',
bmw: '#1c69d4',
mini: '#eb8802',
opel: '#f7ff14',
toyota: '#f02',
volkswagen: '#001e50',
citroen: '#9d0605',
kia: '#051520',
peugeot: '#00a3e0',
ds: '#ad0040',
lexus: '#333366',
},
...
},
},
variants: {
extend: {
display: ["group-hover"],
},
},
plugins: [
require('#tailwindcss/forms'),
require('#tailwindcss/typography'),
require('#vueform/slider/tailwind'),
],
}
As you can see, I added these colors to my safeList, everything works fine except a particular combination:
The last part of my pattern '(/10)?' seems to ignore the hover: variant
bg-alpine -> works
bg-alpine/10 -> works
hover:bg-alpine -> works
hover:bg-alpine/10 doesnt
Maybe its an issue with Tailwind ? or I'm missing something ?
I have a Next.js-Tailwind project to which I want to add custom classes so that I can use them anywhere in the project.
I've tried a couple of things like this but doesn't seem to work.
tailwind.config.js:
module.exports = {
purge: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
height: {
'60': '60rem',
'40': '40rem',
'55': '55rem',
'180': '180px',
},
colors: {
'primary': '#0B003A',
},
},
},
variants: {
extend: {},
},
plugins: [require('#tailwindcss/typography')],
}
What all do I need to do to use these classes globally across the project?
I'm trying to import TypeKit fonts into my Tailwind config. I have included the .css file like so in my index: https://use.typekit.net/kcz3fka.css. Inside my tailwind.config.cjs file I have the definition:
module.exports = {
purge: ['index.html', 'src/**/*.tsx'],
mode: 'jit',
theme: {
extend: {
container: {
center: true,
},
fontFamily: {
display: ['"katarine-web"', ...theme.fontFamily.sans],
body: ['"katarine-web"', ...theme.fontFamily.sans],
},
},
},
plugins: [
require('#tailwindcss/typography'),
require('#tailwindcss/aspect-ratio'),
],
};
I've tried escaping the katarine name as well as with and without double quotes. Neither seem to work as expected. What should I be doing to ensure Katarine can be used?
try this,
module.exports = {
purge: ['index.html', 'src/**/*.tsx'], // include your purge target files
mode: 'jit',
theme: {
extend: {
container: {
'center': true,
},
fontFamily: { // if you want extend 'katrarine-web', then just add them instead other originals.
'display': ['katarine-web'],
'body': ['katarine-web'],
},
},
},
plugins: [
require('#tailwindcss/typography'),
require('#tailwindcss/aspect-ratio'),
],
};
also, check this Doc.
Happy coding :)
In order to have the user be able to select their color scheme in my website, I added a few themes in my style.css file. For example, one is "theme-light"
.theme-light {
--color-bg-primary: theme('colors.white');
--color-bg-typing: theme('colors.white');
--color-bg-input: theme('colors.white');
--color-bg-redo: theme('colors.blue.500');
--color-bg-redo-hover: theme('colors.red.500');
--color-bg-nav: theme('colors.red.500');
--color-bg-nav-active: theme('colors.red.500');
--color-text-primary: theme('colors.gray.900');
--color-text-secondary: theme('colors.gray.600');
--color-text-current: theme('colors.gray.900');
--color-text-correct: theme('colors.green.400');
--color-text-wrong: theme('colors.red.400');
--color-text-stats: theme('colors.gray.600');
--color-placeholder-primary: theme('colors.gray.600');
}
And I edited my tailwind.config.js file like so:
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: [],
theme: {
backgroundColor: {
primary: 'var(--color-bg-primary)',
typing: 'var(--color-bg-typing)',
input: 'var(--color-bg-input)',
redo: 'var(--color-bg-redo)',
'redo-hover': 'var(--color-bg-redo-hover)',
nav: 'var(--color-bg-nav)',
'nav-active': 'var(--color-bg-nav-active)',
},
textColor: {
primary: 'var(--color-text-primary)',
secondary: 'var(--color-text-secondary)',
current: 'var(--color-text-current)',
correct: 'var(--color-text-correct)',
wrong: 'var(--color-text-wrong)',
stats: 'var(--color-text-stats)',
},
placeholderColor: {
primary: 'var(--color-placeholder-primary)',
},
},
variants: {},
plugins: [require('#tailwindcss/typography')],
};
My question is: now I am unable to set anything like I was before in the html (like "text-blue-400" or "text-opacity-50"). How can I get the default configurations working again?
oh lol. all i had to use extend: https://tailwindcss.com/docs/theme