In Tailwind, I want to customize px-10 to equal
padding-left: 10;
padding-right: 10px;
How do I do that?
Many thanks.
You can add custom padding values as shown in their documentation
// tailwind.config.js
module.exports = {
theme: {
spacing: {
sm: '10px',
}
}
}
and use it as
<div class="px-sm"> .. <div/>
OR
Use your custom values inside class by using JIT mode
<div className="pl-[10px] pr-[10px]"> .. </div>
Related
I'm trying to change the theme in an app using the data attribute and then changing the CSS variables according to the different data-theme values.
In the App component, I check if the user has a default theme set, and use that to set new theme on click
import "./styles.css";
import useLocalStorage from "use-local-storage";
export default function App() {
// Check user set theme mode...
const defaultDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
// Create theme mode state...
const [theme, setTheme] = useLocalStorage(
"theme",
defaultDark ? "dark" : "light"
);
// Handle on click from the theme switcher...
const clickHandler = () => {
const newTheme = theme === "light" ? "dark" : "light";
setTheme(newTheme);
};
return (
<div className="App" data-theme={theme}>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={() => clickHandler()}>Dark Mode</button>
</div>
);
}
In the styles.css I set the different variables to define the theme
/* Set the dark mode variables... */
[data-theme="dark"] {
--background: black;
--title-text: white;
--desc-text: grey;
}
/* Set the light mode variables... */
[data-theme="light"] {
--background: white;
--title-text: black;
--desc-text: grey;
}
/* Page Styles... */
body {
padding: 0;
margin: 0;
background: var(--background);
}
/*The rest of the CSS...*/
The rest of the elements work fine as they are wrapped in an element that has the data-theme attribute. However, the body is not wrapped with the data-theme attribute, so there is no change in the body background. In this example, I used .App but I would like to change the body instead. Is there a way to wrap the body in the data-theme attribute in React?
Here is the link to the full code in CodeSandbox
Full code on CodeSandbox
How about wrap App with div.body them pass data-theme into .body instead and make div.body cover body
<div className='body' data-theme={theme}>
<div className='App'></div>
</div>
In tailwindcss: 2.2 layout I have image defined in backgroud
<div class="absolute top-0 w-full h-full bg-gray-900" style="background-image: url(./assets/img/register_bg_2.png); background-size: 100%; background-repeat: no-repeat;"
></div>
and I to hide this backgroud image on small devices. I know how to use
xs:hidden
But in this case all div will be hidden, nut image. How can I do it without splitting into 2 divs ?
UPDATED PART :
I modified tailwind.config.js and added definition :
module.exports = {
purge: {
options: {
safelist: [...ta_gallery_safelist],
},
},
theme: {
extend: {
backgroundImage: theme => ({
'test-device-sm': "url('/img/test-device/sm.png')",
'test-device-md': "url('/img/test-device/md.png')",
'test-device-lg': "url('/img/test-device/lg.png')",
'test-device-xl': "url('/img/test-device/exlg.png')",
// 'personal_page_container_wrapper_bg_image': "url('/img/register_bg_2.png'); background-size: 100%; background-repeat: no-repeat;",
'personal_page_container_wrapper_bg_image': "url('/img/register_bg_2.png')",
}),
but adding personal_page_container_wrapper_bg_image to my divs I do not see any background
image or invalid path error in the console...
classes test-device-... I use to show current device and it work ok...
Thanks in advance!
First of all, xs:hidden will hide the element above xs screen size, not below. You can read about it here.
You can hide background-image by setting it to none. So for your case, you could write your own css like this:
#media screen and (max-width: yourvalue) {
yourselector {
background-image: none;
}
}
or to use tailwind syntax, you could use something like this:
#screen xs {
yourselector {
background-image: url(./assets/img/register_bg_2.png);
background-size: 100%;
#apply bg-no-repeat;
}
}
You should do something like:
class='bg-opacity-0 xs:bg-opacity-100'
I think the logical way is to add your background image by editing the theme.backgroundImage section of your tailwind.config.js file:
module.exports = {
theme: {
extend: {
backgroundImage: {
+ 'bg-header': "url('/img/hero-pattern.svg')",
}
}
}
}
Then you can do something like:
<div class="absolute top-0 w-full h-full bg-gray-900 bg-none sm:bg-header"
If you are not familiar with how "tailwind.config.js" works, read this section, it's the most practical way to customize tailwindcss.
I'm using Tailwind (react/next) and struggle to change the way my scrollbar looks.
It's a single page application and I have been trying to create custom CSS to apply to the first div in my index file, like this:
<div className="no-scroll"> <<<<<<<--------- Adding custom css here
<Head>
<title>Oscar Ekstrand</title>
<link rel="icon" href="/images/favicon.ico" />
</Head>
<main className="flex flex-col no-scroll">
<section ref={heroref}>
<Hero scrollToContacts={scrollToContacts} />
</section>
<section ref={offeringref}>
<Offering />
</section>
<section ref={processref}>
<WhatIDo />
</section>
<section ref={biographyref}>
<CvBar />
</section>
<section ref={skillsetref}>
<Skillset />
</section>
</main>
<section ref={contactsref}>
<Footer />
</section>
</div>
I can get custom CSS classes to work for things like buttons, both with a "plugin-approach" and having a global style sheet. (https://play.tailwindcss.com/zQftpiBCmf)
But I can't understand how to change the look of my scrollbar.
Anyone got an idea?
Tailwind CSS doesn't provide a built-in way to customise the scrollbar styling. However, you can use the various ::-webkit-scrollbar pseudo-elements to style it.
Tailwind playground link: https://play.tailwindcss.com/5samiwyr4v.
#layer utilities {
.scrollbar::-webkit-scrollbar {
width: 20px;
height: 20px;
}
.scrollbar::-webkit-scrollbar-track {
border-radius: 100vh;
background: #f7f4ed;
}
.scrollbar::-webkit-scrollbar-thumb {
background: #e0cbcb;
border-radius: 100vh;
border: 3px solid #f6f7ed;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background: #c0a0b9;
}
}
yarn add -D tailwind-scrollbar
or
npm install --save-dev tailwind-scrollbar
then
plugins: [
// ...
require('tailwind-scrollbar'),
],
sample
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100">
<div class="h-64"></div>
</div>
variants
variants: {
// ...
scrollbar: ['dark']
}
FOR SOME INSTANCE IF YOU WANT TO CHANGE THE WIDTH OF THE SCROLLBAR YOU CAN CUSTOME IN YOUR tailwind.css
#layer utilities {
.scrollbar-medium::-webkit-scrollbar {
width: 12px;
}
}
then
<div class="h-32 scrollbar scrollbar-thumb-gray-900 scrollbar-track-gray-100 scrollbar-medium">
<div class="h-64"></div>
</div>
THERE IS ONLY ONE STYLE FOR SCROLLBAR WHICH IS scrollbar-thin... so customize this way
I've managed to style the scrollbar with Tailwin plugin like this:
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
// ...
plugins: [
plugin(({ addBase, theme }) => {
addBase({
'.scrollbar': {
overflowY: 'auto',
scrollbarColor: `${theme('colors.blue.600')} ${theme('colors.blue.200')}`,
scrollbarWidth: 'thin',
},
'.scrollbar::-webkit-scrollbar': {
height: '2px',
width: '2px',
},
'.scrollbar::-webkit-scrollbar-thumb': {
backgroundColor: theme('colors.blue.600'),
},
'.scrollbar::-webkit-scrollbar-track-piece': {
backgroundColor: theme('colors.blue.200'),
},
});
}),
],
// ...
};
And use like this:
<div class="scrollbar">
<!-- content -->
</div>
/* For Firefox Browser */
.scrollbar {
scrollbar-width: thin;
scrollbar-color: #000 #fff;
}
/* For Chrome, EDGE, Opera, Others */
.scrollbar::-webkit-scrollbar {
width: 20px;
}
.scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.scrollbar::-webkit-scrollbar-thumb {
background:#000;
}
TailwindCSS's doc changed scrollbar styles by scrollbar:!w-1.5 scrollbar:!h-1.5 scrollbar:bg-transparent scrollbar-track:!bg-slate-100 scrollbar-thumb:!rounded scrollbar-thumb:!bg-slate-300 scrollbar-track:!rounded, the plugin they use
/** #type {import('tailwindcss').Config} */
module.exports = {
mode: 'jit',
content: ['./src/**/*.{html,ts,tsx,js}'],
darkMode: 'media',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
// https://github.com/tailwindlabs/tailwindcss.com/blob/ceb07ba4d7694ef48e108e66598a20ae31cced19/tailwind.config.js#L280-L284
function ({ addVariant }) {
addVariant(
'supports-backdrop-blur',
'#supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))',
);
addVariant('supports-scrollbars', '#supports selector(::-webkit-scrollbar)');
addVariant('children', '& > *');
addVariant('scrollbar', '&::-webkit-scrollbar');
addVariant('scrollbar-track', '&::-webkit-scrollbar-track');
addVariant('scrollbar-thumb', '&::-webkit-scrollbar-thumb');
},
],
};
Addition to that comment : https://stackoverflow.com/a/69410151/18041352
You can add darktheme option just adding
dark:scrollbarkdark or what you want to name that.
<div className="... overflow-auto scrollbar dark:scrollbarkdark> ...
Then add this in your main css file like in that comment above.
.scrollbar::-webkit-scrollbar-track {
background: white;
}
.scrollbardark::-webkit-scrollbar-track {
background: black;
}
...
Extend Tailwind by adding your own base styles on top of Preflight, simply add them to your CSS within a #layer base directive:
//Inside styles.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
::-webkit-scrollbar-thumb{
#apply bg-transparent shadow-sm
}
::-webkit-scrollbar{
#apply w-3 bg-transparent
}
::-webkit-scrollbar-thumb{
#apply rounded-none bg-blue-400 /*color trackbar*/
}
}
Check out the documentation [here][1]
[1]: https://tailwindcss.com/docs/preflight
I'm using Material-UI and building a timeline. My code is as follows:
<Timeline align="right" className={classes.monthlyContainer}>
<TimelineItem >
<TimelineSeparator className={classes.timelineSeparator}>
<TimelineDot className={classes.timelineDot} />
<TimelineConnector className={classes.timelineConnector} />
</TimelineSeparator>
{(data.map(url =>
<TimelineContent className={classes.memsImageContainer}>
<img
className={classes.memsImage}
src={url}
alt="MEMs"
/>
</TimelineContent>
))}
</TimelineItem>
</Timeline>
When I render the webpage, the Material-UI timeline keeps creating a .MuiTimelineItem-missingOppositeContent:before element which is shifting the layout of my timeline to the left.
When I inspect the element, this is what I see:
<li class="MuiTimelineItem-root MuiTimelineItem-alignRightMuiTimelineItem-missingOppositeContent">
<div class="MuiTimelineSeparator-root makeStyles-timelineSeparator-4">
<span class="MuiTimelineDot-root makeStyles-timelineDot-5 MuiTimelineDot-defaultGrey">
</span>
<span class="MuiTimelineConnector-root makeStyles-timelineConnector-6">
</span>
</div>
</li>
When I inspect the styles, this is what I have:
.MuiTimelineItem-missingOppositeContent:before {
flex: 1;
content: "";
padding: 6px 16px;
padding-left: 0px;
padding-right: 0px;
I have recreated it in codesandbox here
How can I remove this element?
The definition of the default styles for the missingOppositeContent element is as follows:
/* Styles applied to the root element if no there isn't TimelineOppositeContent provided. */
missingOppositeContent: {
'&:before': {
content: '""',
flex: 1,
padding: '6px 16px',
},
},
You can override the default styles using the same structure. Overriding this in the theme would look like the following:
const Theme = createMuiTheme({
overrides: {
MuiTimelineItem: {
missingOppositeContent: {
"&:before": {
display: "none"
}
}
}
}
});
You can also do this on a case-by-case basis (in case you have other situations in your code where you want the missing-opposite-content styling) using withStyles:
const TimelineItem = withStyles({
missingOppositeContent: {
"&:before": {
display: "none"
}
}
})(MuiTimelineItem);
You won't believe that you just need to add the <TimelineOppositeContent> component and set display property as 'none'. And it will be solved.
Suppose I want to change the standard white background color of the Select component to green.
My try...
<Select
style={{ backgroundColor: 'green' }}>
// Options...
</Select>
...didn't do it.
Can someone point me in the right direction?
[EDIT]
I ended up using the suggested approach from Jesper We.
Overwriting the color for all selections...
.ant-select-selection {
background-color: transparent;
}
...then I could style the Select components individually.
<Select> renders a whole set of <div>s, you need to take a look at the resulting HTML element tree to understand what you are doing. You can't do it through the style attribute, you need to do it in CSS.
The proper place to attach a background color is
.ant-select-selection {
background-color: green;
}
This will make all your selects green. Give them individual classNames if you want different colors for different selects.
For my form with Select element a have some code in render:
const stateTasksOptions =
this.tasksStore.filters.init.state.map(item =>
<Select.Option key={item.id} value={item.id} title={<span className={`${item.id}Label`}>{item.title}</span>}>
<span className={`${item.id}Label`}>{item.title}</span> - <span class="normal-text">{item.help}</span>
</Select.Option>
)
return (
....
<Select
mode="multiple"
value={this.tasksStore.filters.selected.state.map(d => d)}
onChange={this.handleTasksStatus}
optionLabelProp="title"
>
{stateTasksOptions}
</Select>
....
)
And some css for colorizing.
Result:
Try dropdownStyle instead of style.
<Select
dropdownStyle={{ backgroundColor: 'green' }}>
// Options...
</Select>
dropdownStyle is one of select props.
reference: antd select
From their official docs https://pro.ant.design/docs/style
Override the component style
Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.
Antd Select In multi-select state, the default will show all the select items, here we add a limit height for display scroll bar when the content beyond this height.
// TestPage.ts
import { Select } from 'antd';
import styles from './TestPage.less';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
ReactDOM.render(
<Select
mode="multiple"
style={{ width: 300 }}
placeholder="Please select"
className={styles.customSelect}
>
{children}
</Select>,
mountNode,
);
/* TestPage.less */
.customSelect {
:global {
.ant-select-selection {
max-height: 51px;
overflow: auto;
}
}
}
Two points need to be noted:
The imported antd component class name is not translated by CSS Modules, so the overridden class name .ant-select-selection must be put in :global.
Because of the previous note, the override is global. To avoid affecting other Select components, the setting needs to be wrapped by an extra classname to add range restriction
with all the above answers you cant change the styles of tags conditionally but with below approach you can.
You can do a hack and change the styles as you like of tags of select dropdown.
You can use dropdownRender of select which takes 2 arguments
menuNode
props
use props children property to reach to each tag and change the styles and you can conditionally change the styles as you like.
for reference below is the example link for code sandbox
Select Tags Styles Sanbox
May not be an efficient way to do it but you can use this for now to meet your business requirement.
Thanks
Somebody stated the selector to be
.ant-select-selection {...
However it should be selector as follows:
.ant-select-selector {
background-color: green;
}
They implemented this feature with v4 of ant design:
https://github.com/ant-design/ant-design/pull/21064
But beware before blindly upgrading from v3 -> v4 - a lot has changed:
https://github.com/ant-design/ant-design/issues/20661
menuItemSelectedIcon={(props) => {
return (mode == "multiple" ?
<Tooltip title="Check to confirm the apps alongwith the vendor">
<input type="checkbox" checked={props.isSelected}
style={{
margin: 5
}}
/>
</Tooltip>
: null)
}}
Lastly I was working on ant dropdown and it did not get style as I wanted and I did not find a good solution for that.
Then I decided to share my css solution for those who are in my situation:
.license-plate-letters {
overflow-y: hidden !important;
min-width: 240px !important;
.rc-virtual-list-holder>div {
height: auto !important;
}
.rc-virtual-list-holder-inner {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
flex-direction: row !important;
flex-wrap: wrap !important;
.ant-select-item-option {
padding: 0.5rem 12px !important;
&:hover {
background-color: #452380d2 !important;
color: white !important;
}
}
}
}
<Select
virtual={false}
popupClassName="license-plate-letters">
<Select.Option key={sth} Title="title">title</Select.Option>
</Select>
In angular, you can override the style with ng-deep
::ng-deep .ant-select-selector {
background-color: red;
}