I was looking at tailwind doc for container class and saw how it could be customized in tailwind.config.js, likely so:
module.exports = {
theme: {
container: {
padding: {
DEFAULT: '1rem',
sm: '2rem',
lg: '4rem',
xl: '5rem',
'2xl': '6rem',
},
},
},
};
But as it was said, only works in x direction, that's padding-left and padding-right.
Is there a way to add vertical padding in the config file like horizontal one?
Related
I want to set A4 size (210 x 297 mm) in Tailwind. I guess what I'm looking for is something like below
theme: {
extend: {
spacing: {
width: {
a4: "210mm",
},
height: {
a4: "297mm"
}
},
},
<div class="w-a4 h-a4">
</div>
Spacing is kinda a group of sizes
By default the spacing scale is inherited by the padding, margin, width, height, maxHeight, gap, inset, space, and translate core plugins.
So when you're register spacing like
theme: {
extend: {
spacing: {
a4: '210mm',
},
},
You will be able to use p-a4, m-a4, h-a4, w-a4 etc. All of them will have size of 210mm
If you wish to split sizes, no need in spacing key - just pass width and height
theme: {
extend: {
width: {
a4: '210mm',
},
height: {
a4: '297mm',
},
},
Per docs You should have been written like this:
spacing: {
width: {
'a4': "210mm",
},
height: {
'a4': "297mm"
}
},
Or using Arbitrary values If you don't want to extend.
If your using vscode install Tailwind CSS IntelliSense for autocompleting.
custom size（number）
custom is usually in .w-{number} and .w-px two type ，at number In terms of what rem do Relative unit，px Is the absolute unit of pixels 。In rem, each unit is 0.25rem, or 1/4 of a font size.
like this the classname like w-1
<div class="w-1"></div>
.w-1 { width: 1rem; }
I am using Material UI v5, and am trying to make a responsive drawer where for smaller devices it will take up 100% of screen width while for larger devices it should only take 1/3 of screen width. But I have no idea how to access Paper property to modify the actual width and make it responsive.
My code:
import { Drawer, styled } from "#mui/material";
const ResponsiveDrawer = styled(Drawer)(({ theme }) => ({
[theme.breakpoints.up("md")]: {
width: "33%", // THIS ONLY CHANGES DRAWER WIDTH NOT PAPER WIDTH INSIDE THE DRAWER
},
[theme.breakpoints.down("md")]: {
width: "100%",
},
}));
export { ResponsiveDrawer };
How I use it:
import { ResponsiveDrawer } from "./Style";
<ResponsiveDrawer
anchor="right"
open={drawer.state}
onClose={() => drawer.onClick(false)}
>
...
</ResponsiveDrawer>
I figured it out shortly after posting the question. This involves inline styling using useMediaQuery.
const largeScreen = useMediaQuery(theme.breakpoints.up("sm"))
<Drawer
anchor="right"
open={drawer.state}
onClose={() => drawer.onClick(false)}
PaperProps={largeScreen ? {
sx: {
width: 450,
}
} : {
sx: {
width: "100%",
}
}
}
>
<CartContent cart={cart} drawer={drawer}/>
</Drawer>
You can add a div inside the <Drawer> or <SwipeableDrawer> component like so and control the width of the div through CSS (or emotion/styled, if you prefer).
<Drawer ...>
<div className="container">...</div>
</Drawer>
.container {
width: 95vw; // for mobile
... add media queries for rest of the screen sizes here
}
In their docs (expand the code blow) they give an example how to access the paper CSS, where you could add your width settings:
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
({ theme, open }) => ({
width: drawerWidth,
flexShrink: 0,
whiteSpace: 'nowrap',
boxSizing: 'border-box',
...(open && {
...openedMixin(theme),
'& .MuiDrawer-paper': openedMixin(theme),
}),
...(!open && {
...closedMixin(theme),
'& .MuiDrawer-paper': closedMixin(theme),
}),
}),
);
They add the same mixin to '& .MuiDrawer-paper' in the main drawer css.
So for your responsive drawer you should add this paper selector to your styled CSS (maybe check with the inspector, if its the right one):
const ResponsiveDrawer = styled(Drawer)(({ theme }) => ({
[theme.breakpoints.up("md")]: {
width: "33%",
'& .MuiDrawer-paper': {
width: "33%",
},
},
[theme.breakpoints.down("md")]: {
width: "100%",
'& .MuiDrawer-paper': {
width: "100%",
},
},
}));
More information about customizing nested elements can be found on https://mui.com/material-ui/customization/how-to-customize/#the-sx-prop.
I have a TailwindCSS 2.0 project and I've installed all the plugins, including the Typography plugin. When I create a div class="prose", I can put any headings, paragraphs, lists, etc into it and it gets styled by the Typography plugin.
In my project, I want all the within the prose class to be a certain blue, by default. And I also want the links to be a certain link colour that I've defined in my config. These are just a couple of modifications that I want to make so that the default prose class styles everything with my styles. How do I go about that and what is the best practice for it?
Typography plugin can be extended
tailwind.config.js
module.exports = {
theme: {
typography: {
DEFAULT: { // this is for prose class
css: {
color: theme('colors.yourSpecificColor'), // change global color scheme
p: {
fontSize: '14px', // key can be in camelCase...
'text-align': 'center', // or as it is in css (but in quotes).
},
a: {
// change anchor color and on hover
color: '#03989E',
'&:hover': { // could be any. It's like extending css selector
color: '#F7941E',
},
},
ul: {
'> li': {
'&::before': { // more complex example - add before to an li element.
content: '',
....,
},
},
},
},
},
sm: { // and this is for prose-sm.
css: {
....
},
},
},
},
}
Also worse to mention, if you change something in "other" breakpoints than just prose, for ex, 'prose-sm', 'prose-md', etc, changes does not inherits, so if you will change color to blue in prose, it will not change in prose-sm
Customization can be found here
P.S. In example bellow I could messed up with amount of curly brackets, sorry, to hard to track :)
vue 3
For people wanting to customize their own Typography including font size and name for all breakpoints
tailwind config
inside tailwind.config.js in extend
extend: {
fontSize: {
'exampleFont': '36px',
},
In your main.css
#tailwind base;
#tailwind components;
#tailwind utilities;
#layer base {
html {
#screen md {
.text-exampleFont {
font-size: 48px;
}
}
#screen lg {
.text-exampleFont {
font-size: 60px;
}
}
}
}
yourComponent.vue
<div class="text-exampleFont">hello</div>
I am using ngx-gallery to display an image gallery. Although I set the display image arrow property to be true, I can't see the arrows in the image.
I am using Angular 7. This is my gallery.ts file code:
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
ngOnInit(): void {
this.galleryOptions = [
{
'previewCloseOnEsc': true,
'previewKeyboardNavigation': true,
'imageBullets': true,
'imageAutoPlay': true,
width: '100%',
height: '400px',
thumbnailsColumns: 4,
imageAnimation: NgxGalleryAnimation.Slide
},
// max-width 800
{
breakpoint: 800,
width: '100%',
height: '600px',
imagePercent: 90,
thumbnailsPercent: 10,
thumbnailsMargin: 20,
thumbnailMargin: 20
},
// max-width 400
{
breakpoint: 400,
preview: false
}
];
this.galleryImages = [
{
small: 'assets/1-small.png',
medium: 'assets/1-medium.png',
big: 'assets/1-big.png'
},
{
small: 'assets/2-small.png',
medium: 'assets/2-medium.png',
big: 'assets/2-big.png'
},
{
small: 'assets/3-small.png',
medium: 'assets/3-medium.png',
big: 'assets/3-big.png'
},
{
small: 'assets/4-small.png',
medium: 'assets/4-medium.png',
big: 'assets/4-big.png'
}
];
}
I have also changed the css as described in some forum:
ngx-gallery /deep/ ngx-gallery-image .ngx-gallery-arrow {
background-color: orangered;
}
ngx-gallery /deep/ ngx-gallery-thumbnails .ngx-gallery-arrow {
background-color: orangered;
}
ngx-gallery /deep/ ngx-gallery-preview .ngx-gallery-arrow {
background-color: orangered;
}
This is my gallery.html code
<ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
ngx-gallery needs font awesome to display left-right arrow icon. Try including them in your angular-cli.json file. according to their documentation you can include them like this
"styles": [
...
"../node_modules/font-awesome/css/font-awesome.css"
]
You can also include font-awesome.css directly in your index.html file.
Also include hammer.js for swipe. import in your module like this
npm install hammerjs --save
import 'hammerjs';
you may also need bootstrap to use ngx-gallery properly.
i solved using
#import url(../node_modules/font-awesome/css/font-awesome.css);
in "styles.css"
I am trying to adjust the padding of MUI Table.
last-child gets padding 24px which I want to adjust. I have tried to override the theme and to use classes{{root: classes.xxx}} but am not able to change it.
Below is the code I used for overriding the theme (I have also tried to override MuiTableRow and MuiTableColumn):
const theme = createMuiTheme({
overrides: {
MuiTableCell: {
root: {
paddingTop: 4,
paddingBottom: 4,
'& $lastChild': { paddingRight: '5px' },
},
paddingDefault: {
padding: '40px 12px 40px 16px',
},
},
},
});
This is the CSS that I am trying to change (the last cell of each row in the table):
.MuiTableCell-root-511:last-child {
padding-right: 24px;
}
Hope someone can give a helping hand.
Thats the right approach, you just have a few syntax errors in your JSS.
The last child selector should be:
'&:last-child': {}
Here a complete example
const theme = createMuiTheme({
overrides: {
MuiTableCell: {
root: {
paddingTop: 4,
paddingBottom: 4,
"&:last-child": {
paddingRight: 5
}
}
}
}
});
For those who don't want to override theme, you can achieve the same result by providing classes object prop as shown here.
const useStyles = makeStyles({
cell: {
'&:last-child': {
paddingRight: 5,
},
},
});
Provide it to your TableCell as usual;
<TableCell className={classes.cell}>
This will override the &:last-child attribute of your cell. I've found this method to be a little more convenient when I'm not changing anything else in the theme.
In MUI v5, you can use the sx prop and select the last TableCell like this:
<Table
sx={{
'& .MuiTableCell-root:last-child': {
bgcolor: 'pink',
},
}}
>
Or if you want to use createTheme() to override globally:
const theme = createTheme({
components: {
MuiTableCell: {
styleOverrides: {
root: {
'&:last-child': {
backgroundColor: 'tomato',
},
},
},
},
},
});
Live Demo