mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Remove some outdated docs
This commit is contained in:
David Hemphill
parent
717821e52e
commit
c2e4d9d069
@ -248,20 +248,3 @@ Using the utilities in HTML:
|
||||
<div class="bg-slate"></div>
|
||||
<div class="bg-slate-light"></div>
|
||||
```
|
||||
|
||||
Using the utilities in Less:
|
||||
|
||||
```less
|
||||
div {
|
||||
.bg-white;
|
||||
.bg-smoke-lighter;
|
||||
.bg-smoke-light;
|
||||
.bg-smoke;
|
||||
|
||||
.bg-slate-darker;
|
||||
.bg-slate-dark;
|
||||
.bg-slate;
|
||||
.bg-slate-light;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -4,53 +4,3 @@ title: "Border Color"
|
||||
---
|
||||
|
||||
# Border Color
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#color">Color</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
</div>
|
||||
|
||||
<h2 id="colors">Colors</h2>
|
||||
|
||||
By default, borders use the `@default-border-color`. To override a border color, add one of the border color utilities.
|
||||
|
||||
```html
|
||||
<div class="border border-smoke-darker"></div>
|
||||
<div class="border border-smoke-dark"></div>
|
||||
<div class="border border-smoke"></div>
|
||||
|
||||
<div class="border border-white"></div>
|
||||
<div class="border border-smoke-lighter"></div>
|
||||
<div class="border border-smoke-light"></div>
|
||||
|
||||
<div class="border border-invisible"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.border-smoke-darker;
|
||||
.border-smoke-dark;
|
||||
.border-smoke;
|
||||
|
||||
.border-white;
|
||||
.border-smoke-lighter;
|
||||
.border-smoke-light;
|
||||
|
||||
.border-invisible;
|
||||
}
|
||||
```
|
||||
|
||||
The default border colors can also be modified using the following variables.
|
||||
|
||||
```less
|
||||
// Variable: Default:
|
||||
@border-smoke-darker: hsl(0, 0%, 82%);
|
||||
@border-smoke-dark: hsl(0, 0%, 90%);
|
||||
@border-smoke: hsl(0, 0%, 96%);
|
||||
|
||||
@border-white: hsl(0, 0%, 100%);
|
||||
@border-smoke-lighter: hsl(0, 0%, 60%);
|
||||
@border-smoke-light: hsl(0, 0%, 35%);
|
||||
|
||||
@default-border-color: @border-smoke-dark;
|
||||
```
|
||||
|
||||
@ -4,31 +4,3 @@ title: "Font Families"
|
||||
---
|
||||
|
||||
# Font Families
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
<a class="subnav-link" href="#customizing">Customizing</a>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div class="font-sans"></div>
|
||||
<div class="font-serif"></div>
|
||||
<div class="font-mono"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.font-sans;
|
||||
.font-serif;
|
||||
.font-mono;
|
||||
}
|
||||
```
|
||||
|
||||
```less
|
||||
// Customize the font stack
|
||||
@font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
@font-family-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
|
||||
@font-family-mono: Consolas, "Andale font-mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus font-mono L", Monaco, "Courier New", Courier, monospace;
|
||||
@font-family-base: @font-family-sans;
|
||||
```
|
||||
|
||||
@ -47,43 +47,8 @@ The syntax below is combined to create a system for padding and margins. For exa
|
||||
|
||||
You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
|
||||
|
||||
```less
|
||||
// The default sizing scale
|
||||
@sizing-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
'3' 0.75rem,
|
||||
'4' 1rem,
|
||||
'6' 1.5rem,
|
||||
'8' 2rem,
|
||||
'12' 3rem,
|
||||
'16' 4rem,
|
||||
;
|
||||
```
|
||||
|
||||
By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
|
||||
|
||||
```less
|
||||
// Override the margin scale
|
||||
@margin-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the pull scale
|
||||
@pull-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the padding scale
|
||||
@padding-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
```css
|
||||
// Scale customization here
|
||||
```
|
||||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
@ -96,10 +61,6 @@ The spacing utilities can also be used with <a href="/responsive">responsive</a>
|
||||
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.screen(lg, {
|
||||
.mt-6;
|
||||
});
|
||||
}
|
||||
```css
|
||||
// Responsive example here
|
||||
```
|
||||
|
||||
@ -45,45 +45,8 @@ The syntax below is combined to create a system for padding and margins. For exa
|
||||
|
||||
<h2 id="customizing">Customizing the spacing scale</h2>
|
||||
|
||||
You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
|
||||
|
||||
```less
|
||||
// The default sizing scale
|
||||
@sizing-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
'3' 0.75rem,
|
||||
'4' 1rem,
|
||||
'6' 1.5rem,
|
||||
'8' 2rem,
|
||||
'12' 3rem,
|
||||
'16' 4rem,
|
||||
;
|
||||
```
|
||||
|
||||
By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
|
||||
|
||||
```less
|
||||
// Override the margin scale
|
||||
@margin-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the pull scale
|
||||
@pull-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the padding scale
|
||||
@padding-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
```css
|
||||
// Scale customization here
|
||||
```
|
||||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
@ -96,11 +59,6 @@ The spacing utilities can also be used with <a href="/responsive">responsive</a>
|
||||
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.screen(lg, {
|
||||
.mt-6;
|
||||
});
|
||||
}
|
||||
```css
|
||||
// Responsive example here
|
||||
```
|
||||
|
||||
|
||||
@ -47,43 +47,9 @@ The syntax below is combined to create a system for padding and margins. For exa
|
||||
|
||||
You can customize the margin and padding utilities using the `@sizing-scale` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale.
|
||||
|
||||
```less
|
||||
// The default sizing scale
|
||||
@sizing-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
'3' 0.75rem,
|
||||
'4' 1rem,
|
||||
'6' 1.5rem,
|
||||
'8' 2rem,
|
||||
'12' 3rem,
|
||||
'16' 4rem,
|
||||
;
|
||||
```
|
||||
|
||||
By default the `@sizing-scale` is automatically applied to the margin, negative margin (pull) and padding scales. However, it's possible to customize each scale individually using the `@margin-scale`, `@pull-scale` and `@padding-scale` variables.
|
||||
|
||||
```less
|
||||
// Override the margin scale
|
||||
@margin-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the pull scale
|
||||
@pull-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
|
||||
// Override the padding scale
|
||||
@padding-scale:
|
||||
'1' 0.25rem,
|
||||
'2' 0.5rem,
|
||||
// ...
|
||||
;
|
||||
```css
|
||||
// Scale customization here
|
||||
```
|
||||
|
||||
<h2 id="responsive">Responsive spacing utilities</h2>
|
||||
@ -96,11 +62,6 @@ The spacing utilities can also be used with <a href="/responsive">responsive</a>
|
||||
<div class="pull-1 sm:pull-2 md:pull-3 lg:pull-4"></div>
|
||||
```
|
||||
|
||||
```less
|
||||
div {
|
||||
.screen(lg, {
|
||||
.mt-6;
|
||||
});
|
||||
}
|
||||
```css
|
||||
// Responsive example here
|
||||
```
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user