I am trying to use disabled variant in tailiwnd, but it does not seem to work. I do not know what to do.
I want to change button apperance if it is disabled, I have read the documentation and it says 'disabled' variant in not enabled by default. So I modify my tailwind.config.js and now it looks like this:
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {
extend: {
opacity: ['disabled']
}
},
plugins: [],
}
I have this code in my page, both buttons look the same:
<div class="text-center space-x-8">
<button type="button" class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none disabled:opacity-50" tabindex="-1">
Submit
</button>
<button type="button" class="py-2 px-4 bg-green-500 text-white font-semibold rounded-lg shadow-md disabled:opacity-50" disabled tabindex="-1">
Submit
</button>
</div>
I already re-compiled my code and deleted all my browsers caché, but it still does not work. Do I have to do anything else for this to work?
I found the solution by using play.tailwindcss.com:
This is the syntax I have to use in the tailwind.config.js file:
module.exports = {
purge: [],
theme: {
extend: {},
},
variants: {
opacity: ({ after }) => after(['disabled'])
},
plugins: [],
}
I had this problem and updating Tailwind CSS to the latest version fixed it.
npm install tailwindcss#latest postcss#latest autoprefixer#latest
Here's the link: Upgrade Guide -Tailwind CSS It will change other things that you might want to be aware of.
It's now possible to enable all variants by default with the new just in time (JIT) compiler. No need to update your Tailwind config file every time you want to add a new variant.
1. Upgrade to TailwindCSS 2.1 or later
npm i -D tailwindcss#latest
2. Enable JIT mode in your config
// tailwind.config.js
module.exports = {
mode: 'jit',
purge: [
// ...
],
theme: {
// ...
}
// ...
}
3. Explicitely set all files in the purge config
The JIT compiler will look at all these files (and only these files) to generate the CSS on demand. If a file isn't listed here, the CSS won't be generated.
module.exports = {
mode: 'jit',
// These paths are just examples, customize them to match your project structure
purge: [
'./public/**/*.html',
'./src/**/*.{js,jsx,ts,tsx,vue}',
],
theme: {
// ...
}
// ...
}
Docs: https://tailwindcss.com/docs/just-in-time-mode
For me it was because I was trying to use disabled on a <div> element.
Changing the element to <button> resolved the issue.
Related
I cannot make a simple media query for the padding of an element. I work with NextJs but it is not the problem because my custom break points work for everything else but this :
When I have a class like className="p-2 sml:p-4" the p-2 overwrites the other class. I think it has to do with the !important attribute given to p-2 by tailwind.
How to make this simple thing ? What am I missing ?
PS: I repeat, this problem has nothing to do with the media query itself, className="bg-black sml:bg-white" works perfectly fine. The sml: is my custom media query that is triggered at 576px, and I repeat, works very well.
Edit: Minimal code to reproduce
<main className="p-2 sml:p-4">
<div className="w-full h-12 bg-black"/>
</main>
Edit: Config file for tailwind version 3.1.2
/** #type {import('tailwindcss').Config} */
module.exports = {
important: false,
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
plugins: [
require('tw-elements/dist/plugin')
],
darkMode: 'class',
theme: {
screens: {
'sml': '576px',
'mdm': '768px',
'nrm': '992px',
'lrg': '1280px',
'max': '1564px',
},
extend: {
},
},
plugins: [],
}
As you said, the problem is that the !important attribute is added to the p-2 class. You can disable whether or not Tailwind's utilities should be marked with !important in your tailwind.config.js file:
module.exports = {
important: false,
}
Reference: https://tailwindcss.com/docs/configuration
I'm trying to create a modifier for a button for when it's in a loading state.
Based on the documentation here, I added the following in my tailwind.config.js
// I assume this is included in tailwindcss
// and doesn't need to be installed separately
const plugin = require('tailwindcss/plugin')
module.exports = {
// ...
plugins: [
plugin(function({ addVariant }) {
addVariant('loading', '&:loading')
})
],
};
I assume this allows me to add a string of loading in the class such that it will apply those styles. This doesn't seem to work though, what am I doing wrong?
<!-- I assume this should be blue-600 -->
<button className="bg-blue-600 loading:bg-blue-100">
This is a normal button
</button>
<!-- I assume this should be blue-100 since it has className, "loading" -->
<button className="loading bg-blue-600 loading:bg-blue-100">
This is a loading button
</button>
& sign points to an element with THIS variant applied, so it should be translated in CSS as "this element with class .loading". In your example :loading will be translated as loading state which is not valid
So it should be addVariant('loading', '&.loading') not addVariant('loading', '&:loading')
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addVariant }) {
addVariant('loading', '&.loading') // here
})
],
};
I am trying to use negative position utility classes like -left-1 but they are not being generated.
I am using version 2.0.2 and checking the generated css I can see that these classes are not being generated although regular positive ones are. The negative classes are listed on this page as a default class: https://tailwindcss.com/docs/top-right-bottom-left.
I have tried reset the config to default:
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
But it still doesn't generate the negative classes listed at top of the doc page.
Why are these classes not being generated?
It should work as mentioned in the docs. Maybe your screen/viewport is hidding the negative margin with overflow-hidden or something else.
Checkout this working model for negative left-1
<div class="relative h-32 w-32 bg-green-100 mx-auto">
<div class="absolute inset-x-0 top-0 -left-1 h-16 bg-green-300">1</div>
</div>
I never generated it before, but I achieved to make it work. Here are the steps that I followed.
npx tailwindcss-cli#latest init -p
I get the following version: tailwindcss 2.0.3, then I'm generating it with
npx tailwindcss-cli#latest build -c tailwind.config.js -o compiled.css
After looking into the compiled file, I can see that it generated all the negative inset classes like .-inset-1 properly.
PS: this playground example confirms that it is working properly, just to be sure.
I am trying to enable dark mode based on the system default using tailwind.
To accomplish this I am using the plugin: Tailwind dark mode.
My config fail for tailwind is as follows:
defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
experimental: {
darkModeVariant: true
},
purge: [],
theme: {
extend: {
fontFamily: {
sans: ['Nunito', ...defaultTheme.fontFamily.sans],
},
screens: {
'dark': {'raw': '(prefers-color-scheme: dark)'},
// => #media (prefers-color-scheme: dark) { ... }
},
},
},
variants: {
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd'],
borderColor: ['dark', 'dark-disabled', 'dark-focus', 'dark-focus-within'],
textColor: ['dark', 'dark-hover', 'dark-active', 'dark-placeholder'],
opacity: ['responsive', 'hover', 'focus', 'disabled']
},
plugins: [require('tailwindcss-dark-mode')()],
}
defaultTheme = require('tailwindcss/defaultTheme');
And in my html file I am adding the following:
<span class="dark:text-yellow-400">
1
</span>
The plugin checks for my dark mode but the text wont turn yellow it stays black.
Does anyone know why it wont work?
First things first, now TailWIndCSS supports dark-mode out-of-the-box by adding the dark: prefix before any class after it is enabled. Not sure if it is related to the question, but thought you need to know.
The plugin you are using states the following use for enabling dark mode:
< tailwind.config.js >
...
plugins: [
require('tailwindcss-dark-mode')()
]
// To enable dark mode for all classes:
variants: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd', ...]
// To enable dark mode for only single utility class:
variants: {
backgroundColor: ['dark', 'dark-hover', 'dark-group-hover', 'dark-even', 'dark-odd']
}
...
It also states that
Styles generated by this plugin are only used if the selector is applied to the <html> element. How you do that is up to you. prefers-dark.js is provided as an option, which is a simple script that enables dark mode based on the user's system theme.
So, to enable dark mode through the plugin, use:
< mypage.html >
...
<body class="mode-dark">
<div class="bg-white dark:bg-black">
<p class="text-black dark:text-white">
My eyes are grateful.
<a class="text-blue-300 hover:text-blue-400">
Learn more
</a>
</p>
</div>
...
</body>
Add that extra mode-dark class to the wrapper element (body in this case).
To change the theme based on user preferences through the plugin:
< mypage.html >
<head>
<script src="to/prefers-dark.js"></script>
</head>
...
<body class="mode-dark">
<div class="bg-white dark:bg-black">
<p class="text-black dark:text-white">
My eyes are grateful.
<a class="text-blue-300 hover:text-blue-400">
Learn more
</a>
</p>
</div>
...
</body>
With the above, the theme will change as the user changes his/her preferences in the system settings.
P.S. If you wanna use dark mode, use the one in-built in TailWindCSS v2. Enable it like this:
< tailwind.config.js >
module.exports = {
darkMode: 'media',
...
}
media can be changed to class.
Media: Now whenever dark mode is enabled on the user's operating system, dark:{class} classes will take precedence over unprefixed classes. The media strategy uses the prefers-color-scheme media feature under the hood.
Class: If you want to support toggling dark mode manually instead of relying on the operating system preference, use the class strategy instead of the media strategy.
Hope this helped you :)
I had this problem due to forgetting to update tailwind.config.js:
I changed:
darkMode: false,
to
darkMode: 'class',
I have a simple watcher in Vue that toggles it via:
document.querySelector('html').classList.add('dark')
document.querySelector('html').classList.remove('dark')
You can read more here:
https://tailwindcss.com/docs/dark-mode
all,
I'm trying to make tailwinds backgroundImage solution work, and I found help for many other tailwindcss problems here or on github, but not for this.
It's not a complicated task, but still doesn't work.
So as in the documentation, I want to create 2 simple background image to use for multiple viewsize.
It is stated in the documentation https://tailwindcss.com/docs/background-image "By default, only responsive variants are generated for background image utilities."
It means, without any further configuration on variants, I should be able to use it for this purpose.
Here is how my tailwind.conf.js looks like (important part is at the end):
const plugin = require('tailwindcss/plugin')
module.exports = {
purge: [
"./pages/**/*.vue",
"./components/**/*.vue",
"./plugins/**/*.vue",
"./static/**/*.vue",
"./store/**/*.vue"
],
theme: {
extend: {
minHeight: {
'120': '30rem',
},
height: {
'15': '3.75rem',
'17': '4.25rem',
'7': '1.75rem',
'75': '18.75rem',
},
width: {
'15': '3.75rem',
open: '11.875rem',
'75': '18.75rem',
},
margin: {
'7': '1.75rem',
'17': '4.25rem',
'27': '6.75rem',
},
padding: {
'7': '1.75rem',
},
borderWidth: {
'5': '5px',
},
fontSize: {
'5xl': '3.375rem',
'xxl': '1.375rem',
},
boxShadow: {
'lg': '0px 0px 10px #00000033',
'xl': '0px 0px 20px #00000080',
},
gap: {
'7': '1.75rem',
},
inset: {
'10': '2.5rem',
'11': '2.75rem',
'17': '4.25rem',
'1/2': '50%',
},
backgroundImage: {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
}
},
variants: {
opacity: ['group-hover'],
backgroundOpacity: ['group-hover'],
},
plugins: []
}
Just to make sure I included the full content.
And this is how the html looks like:
<div class="bg-hero-sm lg:bg-hero-lg h-24 w-24">
potato
</div>
<div class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"></div>
As I said, nothing special, "npm run dev" finishes witout any error...but if I inspect the element, I cannot see anything related to any background parameter in css. Even the example from documentation doesn't work, which should have to provide a gradient block.
I don't think it's important info, but I use tailwind with laravel.
Can anyone help me with that? I'm desperate, and I'm trying to make it work for days :(I can do workaround using css code in my sass file, but I want to use tailwinds own solution)
Thank you all in advance!
I was having this issue in TailwindCSS 2.2.7 My issue was that my syntax was wrong.
tailwindcss.config.js:
theme: {
backgroundImage: {
'pack-train': "url('../public/images/packTrain.jpg')",
},
App.js
<div className="rounded-lg shadow-lg mb-2 h-screen bg-pack-train flex flex-col sm:mx-8"></div>
The ' and " are critical. For some reason eslint was going in and "cleaning" those characters up on save, which was making it not work. Also, the ../ leading the url was also critical.
If you don't want to extend your theme in the tailwindcss.config.js and want to add the background image directly to your div you can try:
<div className="bg-[url('../public/assets/images/banner.svg')]">
This is the simplest way to get background images working.
Reference: Check under Arbitrary values heading
The background image functionality of tailwindcss has been released in version 1.7.0.
I tested your code in my development environment and it didn't work either since I also had an earlier version of tailwindcss. After upgrading to the latest version, your code has worked fine.
editing your tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
})
}
}
add name and the URL for your image and use it.
example bg-hero-pattern
u need to add (theme) props to your config
like this:
backgroundImage: (theme) => {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
or url with "../" like this
backgroundImage: (theme) => {
'hero-lg': "url('../storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('../storage/img/sys/sm-hero.jpg')",
},
Hope it works :)
In ^3.1.8 version image path was not working. Then I just put "../" instead of "./"
and it worked. Example:
extend: {
backgroundImage: {
'hero-pattern': "url('../src/assets/images/bg.png')",
}
}
I had to specify a height for my image to be displayed
<div className="h-screen bg-hero"/>
For static image[set is background image] works for me.
First import the image from the static image folder.
import m5 from '../Assets/a2.avif'
Then use it like this.
<div style={{ backgroundImage: `url(${m5})` }}>
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend{},backgroundImage: {"hero-lg": "url('/src/assets/images/bg.png')","hero-sm": "url('/src/assets/images/bg.png')",},},
class="hero-content bg-hero-sm lg:bg-hero-lg flex-col lg:flex-row-reverse"