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; }
Related
How do I customize the margin value
The default margins for mr mt ml mb is 1em，How can I set these margins to use 18px or 20px? I'd also like to do something similar with padding.
my: margin : 20px 0
mx: margin : 0 20px
ml : margin-left: 20px
mt: margin-top: 20px
You can do that by customizing your theme.
You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file.
module.exports = {
theme: {
extend: {
spacing: {
'20px': '20px',
}
}
}
}
Alternatively, you can customize just the margin scale by editing theme.margin or theme.extend.margin in your tailwind.config.js file.
module.exports = {
theme: {
extend: {
margin: {
'18px': '18px',
}
}
}
}
Also, if you don't want to modify your theme, you can use arbitrary values for the utility classes, such as m-[20px] or my-[18px].
Resource: https://tailwindcss.com/docs/margin#customizing-your-theme
I am using chart.js to show a line chart in an Angular component. The code does not have any padding or margins added for the chart. I added styling to set the padding and margin to zero both in the create the chart in the .ts file and in the style sheets and nothing makes any difference. When I inspect the element in Chrome developer mode it does not show any padding or margins, so I think the styling is internal to chart.js. Below is a screenshot with the chart element highlighted in Chrome developer mode.
As you can see, there is a margin or border on the left, bottom and right of the chart canvas element, but strangely not at the top. The spacing between the Y-Axis labels and the left of the chart are especially bad when viewed on a mobile phone so I really need to remove it. I have spent hours setting every element I can think of to have 0 padding and 0 margins and trying different changes to the code and style sheets and searching through other articles on the Internet including Stackoverflow but none of them seem to answer this specific question.
I also tried adding box-sizing:border-box; to the div container containing the chart but it did not make any difference, i.e. as suggested in this article:
Why is chart.js canvas not respecting the padding of the container element?
Here is my chart configuration:
this.myChart = new Chart("chartCanvas", {
type: 'line',
data: {
labels: labelVars,
datasets: datasets
},
options: {
elements: {
point: {
radius: 0
},
},
responsive: true,
maintainAspectRatio: false,
tooltips: {
mode: 'index',
intersect: false,
enabled: width > 640
},
hover: {
mode: 'nearest',
intersect: true
},
legend: {
display: false,
position: 'bottom',
labels: {
}
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'week',
tooltipFormat: 'MM/DD/YYYY'
},
display: true,
scaleLabel: {
display: true,
labelString: ''
},
ticks: {
autoSkip: true,
padding: 0,
maxTicksLimit: this.getTickLimit(),
maxRotation: this.getRotation(),
minRotation: this.getRotation()
},
gridLines: {
display: false,
offsetGridLines: true
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: ''
},
ticks: {
maxTicksLimit: 6,
beginAtZero: false
}
}]
}
}
});
Here is the current html:
<div class="chartContainer">
<canvas *ngIf="displayChart" id="chartCanvas"></canvas>
</div>
And here is the current css:
#chartCanvas {
padding-left: 0;
margin-left: 0;
}
.chartContainer {
height: 500px;
margin: 0;
padding: 0;
align-items: left;
align-self: left;
align-content: left;
}
Has anyone else encountered this problem?
I found the problem. I had the scaleLabel turned on but was not showing a scale label, which was adding extra space. I changed scaleLabel display to false as shown below and the space went away:
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: ''
},
Depending on your chartjs config, you just have to set the padding of the chart.js config.
Info: Offset's in the canvas cannot be altered with css, since the chart is "drawn" on it.
(details: in the documentation)
For a example:
const config = {
type: 'line',
data: data,
options: {
...
plugins: {
....
},
scales:{
x: {
ticks:{ padding:0 }
}
},
}
};
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?
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"