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 ?
Related
I don't know why all the style sections of my project having a gray text. Anything work normally but this make it hard to watch.
image.
My nuxt.config.ts
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
typescript: {
shim: false,
},
modules: [
[
"#pinia/nuxt",
{
autoImports: ["defineStore"],
},
],
],
css: [
"~/assets/css/tailwind.css",
"#fortawesome/fontawesome-svg-core/styles.css",
],
build: {
postcss: {
postcssOptions: require("./postcss.config"),
},
},
});
My postcss.config.js
module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": "postcss-nesting",
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
},
};
content of my tailwind.config
content: [
"./assets/**/*.{vue,js,css}",
"./components/**/*.{vue,js}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
"./app.{vue,ts,js}",
],
Have anyone encountered this problem before? please help me.
Nevermind, I installed extension language-postcss and its good
This is my tailwind.config.js:
module.exports = {
content: ["./Views/**/*.{cshtml,js}"],
theme: {
extend: {},
},
plugins: [
require("#tailwindcss/forms")({
strategy: "class",
}),
],
}
Now I have a class input-validation-error which gets added dynamically at runtime, thus not being available in the files listed in the content section of the TailwindCSS config file.
How can I add this class to the JIT generated CSS file anyway as JIT is the default in TailwindCSS 3?
You can add the class(es) to a savelist.
module.exports = {
content: ["./Views/**/*.{cshtml,js}"],
safelist: [
'your-class',
'your-class',
],
theme: {
extend: {},
},
plugins: [
require("#tailwindcss/forms")({
strategy: "class",
}),
],
}
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 :)
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.