How can I set a table-border spacing in tailwind? below is the css code
border-spacing: 0 15px;
There are no default border-spacing classes generated by default. But you can create for your own.
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function ({ addUtilities, matchUtilities, theme }) {
// add default utilies for border-spacing
addUtilities({
'.border-spacing-2': {
'border-spacing': '0.5rem',
},
'.border-spacing-4': {
'border-spacing': '1rem',
},
})
// add dynamic match for arbitrary values, like border-spacing-[50px]
matchUtilities(
{
'border-spacing': (value) => ({
'border-spacing': value,
}),
},
{ values: theme('borderSpacing') }
)
}),
],
}
Then you can use border-spacing classes. Like;
border-spacing-2
border-spacing-[50px]
border-spacing-[20px_10px]
DEMO
P.S. You have to use border-separate class on table. Because tailwind uses border-collapse by default.
There is no default class for table border spacing in tailwind css.
while you can create it with padding class, or use Cellspacing and Cellpadding attributes of table tag.
Related
When I check the official Tailwind CSS documentation, it says that
Use w-screen to make an element span the entire width of the viewport.
I mean, w-screen is ok when I try to implement
width: 100vw;
But what should I do when I try to implement
width: 90vw;
height: 90vh;
The right approach to take depends on whether the values are going to be reused.
Arbitrary Values
If there's one specific place that you need a value such as 90vw rather than it being repeated, opt for an arbitrary value. Example:
<div class="w-[90vw] h-[90vh]"></div>
Classes for those styles will be generated automatically.
Extending Your Config
For styles that are likely to be repeated or which should be part of your design system, extend your Tailwind config instead:
// tailwind.config.js
module.exports = {
theme: {
extend: {
height: {
'screen/90': '90vh',
},
width: {
'screen/90': '90vw',
}
}
}
}
Use:
<div class="w-screen/90 h-screen/90"></div>
I find useful to create a plugin for this case
Change Tailwind config into this (add plugin and default values)
const plugin = require('tailwindcss/plugin')
// create default values
const screenKeys = Array.from({length: 20}, (_, i) => i*5)
const screenSizes = screenKeys.reduce((v, key) => Object.assign(v, {[key]: key}), {});
module.exports = {
// ...
plugins: [
plugin(function ({matchUtilities, theme}) {
matchUtilities(
{
'w-screen': width => ({
width: `${width}vw`
})
},
{ values: Object.assign(screenSizes, theme('screenSize', {})) }
),
matchUtilities(
{
'h-screen': height => ({
height: `${height}vh`
})
},
{ values: Object.assign(screenSizes, theme('screenSize', {})) }
)
})
],
}
It will allow you to use w-screen or h-screen utility with any vw or vh values from 0 to 95 with step 5 (0,5,10...95). w-screen with no values will be 100vw (as current behaviour)
<div class="w-screen h-screen-35">
Default width screen is still working
</div>
<div class="w-screen-50 h-screen-[15]">
50vw width, 15vh from JIT
No need to set h-screen-[15vh] as we already know we're working with vh units
</div>
In your case it will be w-screen-90 h-screen-90
You may extend config for reusable classes with screenSize key
module.exports = {
theme: {
extend: {
screenSize: {
33: 33 // just an example
}
},
},
}
Usage
<div class="w-screen-[22] h-screen-33">
33vh from user config, 22vw from JIT
</div>
DEMO
You can use the Tailwind CSS utility classes to set the width and height of an element to a specific viewport width or height.
For example, to set the width of an element to 90vw, you can use the class w-90. Similarly, to set the height of an element to 90vh, you can use the class h-90.
So, in your case, you can use the following classes:
w-90
h-90
I want to add this style:
background: linear-gradient(10deg, #AF8800 4.03%, #AA9F1F 6.02%, #A7B334 6.01%)
... to tailwind to be able to add it as a class name. I know that in tailwind we can create classes like this:
bg-[red]
Question: How to do the same action as above with the specified gradient?
you can easily use from and to in your class like
<div class="bg-gradient-to-r from-cyan-500 to-blue-500"></div>
from that's snippet you can gradient from color cyan 500, to blue 500
It is complex gradient so you have to use either arbitrary values or extend Tailwind configuration. Add CSS property almost as it is within square brackets - replace spaces with low dash _. Your class should looks like
<div class="bg-[linear-gradient(10deg,#AF8800_4.03%,#AA9F1F_6.02%,#A7B334_6.01%)] p-10"></div>
If you have less than 3 colors included it may be separated between few "stop-color" classes
<div class="p-10 bg-[linear-gradient(10deg,var(--tw-gradient-stops))] from-[#AF8800_4.03%] via-[#AA9F1F_6.02%] to-[#A7B334_6.01%]"></div>
I've also created this package so you can use bg-gradient-10 instead of bg-[linear-gradient(10deg,var(--tw-gradient-stops))]
If you want to avoid arbitrary variants you may extend configuration for background-image or create static utility plugin
const plugin = require('tailwindcss/plugin')
/** #type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
backgroundImage: {
'my-gradient': 'linear-gradient(10deg, #AF8800 4.03%, #AA9F1F 6.02%, #A7B334 6.01%)'
}
},
},
plugins: [
plugin(function({ addUtilities, addComponents, e, config }) {
addUtilities({
'.bg-my-uitility-gradient': {
'background-image': 'linear-gradient(10deg, #AF8800 4.03%, #AA9F1F 6.02%, #A7B334 6.01%)',
},
})
})
],
}
<div class="p-10 bg-my-gradient"></div>
<div class="p-10 bg-my-uitility-gradient"></div>
DEMO
How can we use custom percentage on padding in Tailwind CSS?
My config:
theme: {
extend: {
spacing: {
'80\%': '80%', // p-80% - doesn't work
}
},
},
We can achieve that in the old way with the plain CSS:
.p-80\% {
padding: 80%;
}
But ideally, we can do it with Tailwind too.
Any ideas?
While the other answers do provide an answer, this can be frustrating if you only need to use the custom value once. I found this answer when trying to solve such an issue, so for those who find this after me, tailwind now supports arbitrary values.
You can use them by appending square brackets containing a CSS value (e.g. [80%]) to a prefix such as p- for padding or mr- for margin-right.
<div class="p-[80%]">
Hello world!
</div>
You don't need to escape the percent sign for Tailwind, it will take care of that. Here's a play example https://play.tailwindcss.com/CYR6JOXYyz?file=config
theme: {
extend: {
spacing: {
'80%': '80%', // p-80% - should work
}
},
},
The class Tailwind will create is .p-80\% for the above config.
I found that using spacing to customize more than padding, margin, width, and height all at once
Code
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
padding: {
'p-80': '80%',
},
// Build your palette here
colors: {
'black': '#393939',
}
}
}
}
Markup
TailWindCSS Dev
Tried to use the JIT feature by adding this class font-[variant] without any effect.
I know that I can use the #apply directive and add the normal CSS, but I wanted to be sure that there is no Tailwind way to do it.
Any help is appreciated
Tailwind way will be to write custom plugin for every font-variant property. This example will add support for font-varaint-ligatures.
The way you tried font-variant-[variant] will not work because ligatures, east-easian, etc are part of a property, not a value
NOTE: unfortunatelly example bellow DOES NOT support JIT feature as a lack of information about support for adding custom JIT utilities (at least for now)
const plugin = require('tailwindcss/plugin');
module.exports = {
// ...config
plugins: [
plugin(
function ({ addUtilities, e }) {
// this class define how would you call it for ex 'variant-ligatures-[value]'
const yourClass = 'variant-ligatures';
// key - Tailwind 'caller', value - actual CSS property value
const values = {
'normal': 'normal',
'none': 'none',
'common': 'common-ligatures',
'no-common': 'no-common-ligatures',
'discretionary': 'discretionary-ligatures',
'no-discretionary': 'no-discretionary-ligatures',
'historical': 'historical-ligatures',
'no-historical': 'no-historical-ligatures',
'contextual': 'contextual',
'no-contextual': 'no-contextual',
'inherit': 'inherit',
'initial': 'initial',
'unset': 'unset',
};
// add support for responsive variants so you can use it like sm:variant-ligature-normal
const variants = ['responsive'];
addUtilities(
[
Object.entries(values).map(([key, value]) => {
return {
[`.${e(`${yourClass}-${key}`)}`]: {
'font-variant-ligatures': value, // CSS
},
}
}),
],
{ variants }
);
}
)
],
};
in this case variant-ligatures-historical will be rendered as
.variant-ligatures-historical {
font-variant-ligatures: historical-ligatures;
}
and sm:variant-ligatures-historical as
#media (min-width: 640px) {
.sm\:variant-ligatures-historical {
font-variant-ligatures: historical-ligatures;
}
}
I'm trying to provide CSS overrides for MuiTab to increase the font-size.
Using the documentation about CSS overrides on material-ui I've managed to increase font size for most elements, however I got stuck at elements that use media queries as they produce more specific CSS rules than the ones I provide with my overrides.
theme.ts :
import { createMuiTheme } from '#material-ui/core';
const fontSizeStyle = {
fontSize: '1rem',
};
const fontFamilyStyle = {
fontFamily: '"Ubuntu", sans-serif'
};
const theme = createMuiTheme({
overrides: {
MuiTab: {
root: {
...fontFamilyStyle,
...fontSizeStyle,
},
label: fontSizeStyle,
},
}
});
export default theme;
This produces following css rules applied to a MuiTab:
The rule is generated by the following file:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tab/Tab.js
[theme.breakpoints.up('md')]: {
fontSize: theme.typography.pxToRem(13),
},
Does anyone have an example how to override this media query using createMuiTheme function? I don't have the breakpoints, so perhaps I need to specify breakpoints as well to be able to use them in my overrides
Kind regards
I solved it by specifying it in the following way:
MuiTab: {
root: {
minWidth: 0,
'#media (min-width: 0px)': {
minWidth: 0
}
}
}
Specify it as follows
let theme = createMuiTheme({});
theme = {
...theme,
overrides: {
MuiTab: {
root: {
[theme.breakpoints.up("xs")]: {
minHeight: 10
}
}
}
}
}
export default theme;
theme.breakpoints exposes four helper methods to create CSS media queries:
theme.breakpoints.up(key)
theme.breakpoints.down(key)
theme.breakpoints.only(key)
theme.breakpoints.between(start, end)
Where each key is a breakpoint and matches with a fixed screen width.
Allowed key values are xs|sm|md|lg|xl
See material-ui docs for more info
I also faced the same issue. I read the docs about Breakpoints and find a way for this situation but I find it kinda ugly as I have to apply the overridden styles in each Tab using classes property.
Note: I don't know the solution for this problem using createMuiTheme function
Apply the style to the breakpoints style. In this case,
const styles = theme => ({
mediaFont:{
[theme.breakpoints.up('md')]: {
fontSize:fontSizeStyle.fontSize,
},
},
});
Apply the above style to TabLabel
<Tab label="Item One" classes={{label:classes.mediaFont}} />
CSS has a mechanism for forcing a less specific rule to override a more specific one: !important.
const fontSizeStyle = {
fontSize: '1rem !important',
};