before I use the prefix , I could use dark mode normally , but after made a prefix to my tailwind classes , I cannot use the dark mode no longer , anyone know how to toggle dark mode with prefix ?, please
Your prefix needs be there in the dark mode class as well.
the below example assumes you have tw as configured prefix
<!-- add your prefix here too -->
<html class="tw-dark">
<body>
<!-- apply dark mode class with prefix -->
<div class="bg-white dark:tw-bg-black">
<!-- ... -->
</div>
</body>
</html>
if you don't want the prefix for the dark class then tweak the config:-
/** tailwind.config.js */
prefix: 'tw-',
darkMode: ['class', '[class="dark"]',
...
this will allow you to switch to dark mode without adding the prefix
<!-- now no need to prefix tw-dark -->
<html class="dark">
</html>
Related
I have a custom block that creates a 3 column template with InnerBlocks and a templateLock="all" attribute to avoid that users move/remove or add something in the template. It used to properly work on WordPress 6.0.3 (and bellow) but then when I updated to 6.1.1 it had issues. Instead of locking the template and showing the columns in which I should be able to add other blocks, it hides the newly inserted columns so that they are unselectable in the editor.
Here is how I create the innerBlocks
<window.wp.blockEditor.InnerBlocks
template={new Array(3).fill(['core/column', {}])}
templateLock="all"
/>
Here is what I have when I copy the block
<!-- wp:attest/grid-columns {"numColumnsStr":"3"} -->
<div class="grid grid--columns-3"><!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:attest/grid-columns -->
I've tried to look at the changes since WordPress 6.0.3 but couldn't find something useful.
Thanks for you help.
In fact child blocks inherits from parent's templateLock attribute so the columns were present, they were just locked and as they are newly inserted, they were empty thus rendered invisible. So the idea is to unlock the core/column block and its (future) child blocks by default. Here is my updated code
<window.wp.editor.InnerBlocks
template={new Array(numColumns).fill(['core/column', {templateLock: false, lock: {move: false, remove: false}}])}
templateLock='all'
/>
I have several message boxes and each box has a data-author attribute.
If I want to apply styles to these message boxes in CSS, I can just do:
[data-author="Ben"] {
background-color: blue;
}
But I'm not sure how to do this with Tailwind CSS or whether it's even possible. Any idea?
Thanks
You can do this by adding a variant. In your tailwind.config.js:
Add const plugin = require('tailwindcss/plugin') at the top of the page.
Then in your export add:
plugins: [
plugin(({ addVariant }) => {
addVariant('ben', '&[data-author="Ben"]')
}),
]
All you have to do is then use it how you want: ben:bg-blue-500
You would need to create a new one for each individual author though, or come up with a convention for grouping them by colors.
Updated answer as of 2022/10/30
As of Tailwind v3.2, data attribute variants are supported.
<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
<!-- ... -->
</div>
<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
<!-- ... -->
</div>
See here: https://tailwindcss.com/blog/tailwindcss-v3-2#data-attribute-variants
you can use the syntax you used above. for implementation problems, you can use the #apply directive which can directly call the utility class from tailwind
In addition, you can also apply a color that is outside the tailwind color by using an arbitrary value
[data-author="Ben"] {
#apply bg-[#bada55];
}
You can learn more about arbitary value in this article:
https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values
This isn't possible with tailwind, you can only target elements by giving them classes. However, you can still write custom CSS and add styles to it with tailwind's #apply:
[data-author="Ben"] {
#apply bg-blue-500;
}
I think you are looking for the best syntax for state selection:
<a class="bg:blue[data-author=Ben]" data-author="Ben">Ben</a>
All native CSS selectors can be applied:
<button class="opacity:.5[disabled]" disabled>Submit</button>
It's enabled with zero configuration and the syntax is very similar to native CSS.
In order to easily distinguish between production and staging web site, I would like to apply different CSS styles, based on the Rails environment.
What is the best way to accomplish this please?
You can use Rails.env.production? and add some class to div, body etc...
If you want to do it global in you application layout add something like:
<!-- application_layout -->
<body class="<%= Rails.env.production? ? 'prod-class' : 'dev-class' %>">
</body>
If is only for some div or element:
<div class="<%= Rails.env.production? ? 'prod-class' : 'dev-class' %>">
</div>
I'm using multiple window on the same page and i want to apply
different styles on which window. I try to write a wrapper over the
window so it can be identified in the css by id but that does not work.
This is the source:
<div class="wrapper">
<div kendo-window="InitialisingApp">
</div>
</div>
This is the result:
<div class="wrapper"></div>
<div class="k-widget k-window....">
..........................
</div>
Any ideas about this problem?
Thank you! Have a nice day!
You can take a look at this:
Limit scope of external css to only a specific element?
Only other option that I see is to copy the theme and add a css selector in front of everything so that the theme only apply when wrapped with a specific class. Also keep in mind the CSS priorities to make sure the blue style gets applied over the default style.
Example:
<style>
.blueStyleWrapper .k-window {
/* Some kendo styles */
}
</style>
<div class="blueStyleWrapper">
<div class="k-window">
This window will be using the blue theme!
</div>
</div>
I want to know if it is possible to disable styling on a specific html element.
In my case it is a input text. I cannot resize it. I went through the bootstrap css and found it has padding. I tried to use padding: none and 0 0 0 0 plus !important and it did not work.
Is possible to disable the styling for that specific item?
As of Bootstrap 3, you'd use the list-unstyled class to achieve this.
Example:
<ul class="list-unstyled">
<li>...</li>
</ul>
Hope this solves your problem.
Yes it is possible. You can achieve it in following way:
Load your own stylesheet definition after the bootstrap.css. For your case define input[type=text]{padding:0px;} must call after the bootstrap's css file(s).
If you want to use in-line css you can try: <input type="text" style="padding:0px" />
Hope it helps.
in the 'head' of your HTML change the order of the local css file and bootstrap css, the local css should be the after the bootstrap css:
<head>
<!-- bootstrap css is the first here -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- bootstrap css is the last -->
<link rel="stylesheet" href="style.css">
</head>
now if you applied !important in your css it should work.
another solution is to apply your css inline <element style="padding:0"></element>
Set it in the style of the element in the style attribrute if an item is there it has priority.
Also if you want to be double sure add !important as well
Would Javascript be of any help to you? If so the .setAttribute native javascript function can help:
http://jsfiddle.net/nMJjS/1/
Just replace the id that I made up with the id of input element you want to change