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.
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 want to build a color palette Blade component, but I noticed that dynamically created Tailwind class strings are not preserved in Tailwinds JIT mode (see Tailwind Docs).
Example
A minimal example of what I want to achieve would look something like this:
/tailwind.config.js
...
module.exports = {
mode: 'jit',
purge: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./vendor/laravel/jetstream/**/*.blade.php',
'./storage/framework/views/*.php',
'./resources/views/**/*.blade.php',
],
theme: {
colors: {
primary-400: '#3892e6',
},
},
};
/routes/web.php
...
Route::get('/', function () {
return view('welcome', ['color' => 'primary']);
});
...
/resources/views/welcome.blade.php
...
<body class="antialiased min-h-screen flex items-center justify-center">
<h1 class="text-4xl text-{{ $color }}-400">{{ $color }}</h1>
</body>
...
The documentations approach of dynamically selecting a complete class name would render the component useless:
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
The documentation mentions two features that might help: Safelisting and Transforming content.
So one way would be transforming the Blade templates to HTML but I believe this is not possible. The other way I can think of, would be generating the Safelist dynamically from the theme object, but I have no clue how to start.
Does anybody have had to tackle this problem before, or can think of another approach?
Here is the Tailwind Play code.
I have a configuration as below, mind the custom breakpoint:
const colors = require("tailwindcss/colors");
module.exports = {
darkMode: "media", // or 'media' or 'class'
theme: {
extend: {
screens: {
xs: "320px", // here i have xs
},
colors: {
orange: colors.orange,
},
},
},
variants: {
extend: {},
},
plugins: [],
};
Then I have some elements as below:
<div class="bg-gray-500 xs:hidden sm:hidden md:flex">
<h1>foo</h1>
</div>
I want the div to display on screens above md, otherwise it should be hidden.
The weird thing about the code above is this totally works with built-in breakpoint, sm. For example, if you remove xs:hidden in Tailwind Play. You will see the behavior I want to have.
However, I also want to include xs:hidden. Why does this happen?
Thanks in advance.
Environment
"postcss": "^7.0.39",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.2.17"
Using with React.
To hide and element until a specific width use hidden to hide the element and another display class with responsive modifier (e.g. md:flex) to show it again.
So basically this should fit your needs:
<div class="bg-gray-500 hidden md:flex">
<h1>foo</h1>
</div>
See https://play.tailwindcss.com/Nb0QOhn9E7 for a working snippet.
Combining a responsive hidden (e.g. xs:hidden) and with another responsive display class (e.g. md:flex) doesnt work as the specifity of both css selectors is the same (both use a single class selector inside a mediaquery) so the md:flex does not overwrite it.
Therefore use non-responsive hidden (single class selector) which is less specific then md:flex (single class selector inside a mediaquery) so it gets overwritten for md upwards.
Theres also a issue in tailwind-css github regarding this behaviour:
https://github.com/tailwindlabs/tailwindcss/issues/841
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.
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