mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Merge remote-tracking branch 'remotes/upstream/master' into fix-issue-18
# Conflicts: # __tests__/sanity.test.js # src/lib/substituteResponsiveAtRules.js
This commit is contained in:
Patrick Heller 💩
commit
498c53c582
3
.eslintignore
Normal file
3
.eslintignore
Normal file
@ -0,0 +1,3 @@
|
||||
/lib
|
||||
/docs
|
||||
defaultConfig.js
|
||||
26
.eslintrc
Normal file
26
.eslintrc
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"env": {
|
||||
"jest": true
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 6,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"extends": ["eslint-config-postcss", "prettier"],
|
||||
"plugins": ["prettier"],
|
||||
"rules": {
|
||||
"prettier/prettier": [
|
||||
"error",
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"trailingComma": "es5",
|
||||
"bracketSpacing": true,
|
||||
"parser": "flow"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
10
.github/COMMUNITY_GUIDELINES.md
vendored
Normal file
10
.github/COMMUNITY_GUIDELINES.md
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
# Tailwind CSS Community Guidelines
|
||||
|
||||
The following community guidelines are based on [The Ruby Community Conduct Guidelines](https://www.ruby-lang.org/en/conduct/).
|
||||
|
||||
This document provides community guidelines for a respectful, productive, and collaborative place for any person who is willing to contribute to the Tailwind CSS project. It applies to all “collaborative space”, which is defined as community communications channels (such as mailing lists, submitted patches, commit comments, etc.).
|
||||
|
||||
- Participants will be tolerant of opposing views.
|
||||
- Participants must ensure that their language and actions are free of personal attacks and disparaging personal remarks.
|
||||
- When interpreting the words and actions of others, participants should always assume good intentions.
|
||||
- Behaviour which can be reasonably considered harassment will not be tolerated.
|
||||
85
.github/CONTRIBUTING.md
vendored
Normal file
85
.github/CONTRIBUTING.md
vendored
Normal file
@ -0,0 +1,85 @@
|
||||
# Contributing
|
||||
|
||||
Thanks for your interest in contributing to Tailwind CSS! Please take a moment to review this document **before submitting a pull request**.
|
||||
|
||||
## Pull requests
|
||||
|
||||
**Please ask first before starting work on any significant new features.**
|
||||
|
||||
It's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create [an issue](https://github.com/tailwindcss/tailwindcss/issues) to first discuss any significant new features. This includes things like adding new utilities, creating new at-rules, or adding new component examples to the documentation.
|
||||
|
||||
## Coding standards
|
||||
|
||||
Our code formatting rules are defined in [.eslintrc](https://github.com/tailwindcss/tailwindcss/blob/master/.eslintrc). You can check your code against these standards by running:
|
||||
|
||||
```sh
|
||||
npm run style
|
||||
```
|
||||
|
||||
To automatically fix any style violations in your code, you can run:
|
||||
|
||||
```sh
|
||||
npm run style --fix
|
||||
```
|
||||
|
||||
## Running tests
|
||||
|
||||
You can run the test suite using the following commands:
|
||||
|
||||
```sh
|
||||
npm test
|
||||
```
|
||||
|
||||
Please ensure that the tests are passing when submitting a pull request. If you're adding new features to Tailwind, please include tests.
|
||||
|
||||
## Building the documentation
|
||||
|
||||
Tailwind uses the [Jigsaw](http://jigsaw.tighten.co/) static site generator for its documentation. Here is how you can generate the documentation locally:
|
||||
|
||||
1. Go to your Tailwind folder
|
||||
|
||||
```sh
|
||||
cd tailwindcss
|
||||
```
|
||||
|
||||
2. Install JS dependencies
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
3. Transpile the source code
|
||||
|
||||
```sh
|
||||
npm run prepare
|
||||
```
|
||||
|
||||
4. Go to docs folder
|
||||
|
||||
```sh
|
||||
cd docs
|
||||
```
|
||||
|
||||
5. Install PHP dependencies for docs (requires Composer: https://getcomposer.org)
|
||||
|
||||
```sh
|
||||
composer install
|
||||
```
|
||||
|
||||
6. Install JS dependencies for docs
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
7. Run the build to generate the static site
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
8. View the static site at `/tailwind/docs/build_local`, or you can run the Jigsaw server:
|
||||
|
||||
```sh
|
||||
./vendor/bin/jigsaw serve
|
||||
```
|
||||
11
.github/PULL_REQUEST_TEMPLATE.md
vendored
Normal file
11
.github/PULL_REQUEST_TEMPLATE.md
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
<!--
|
||||
|
||||
👋 Hey, thanks for your interest in contributing to Tailwind!
|
||||
|
||||
**Please ask first before starting work on any significant new features.**
|
||||
|
||||
It's never a fun experience to have your pull request declined after investing a lot of time and effort into a new feature. To avoid this from happening, we request that contributors create an issue to first discuss any significant new features. This includes things like adding new utilities, creating new at-rules, or adding new component examples to the documentation.
|
||||
|
||||
https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md
|
||||
|
||||
-->
|
||||
20
README.md
20
README.md
@ -1,7 +1,21 @@
|
||||
# Tailwind CSS
|
||||
<p align="center">
|
||||
<a href="https://tailwindcss.com/" target="_blank"><img width="200" src="https://tailwindcss.com/img/tailwind.svg"></a><br>
|
||||
A utility-first CSS framework for rapidly building custom user interfaces.
|
||||
</p>
|
||||
|
||||
A utility-first CSS framework for rapidly building custom user interfaces.
|
||||
<p align="center">
|
||||
<a href="https://app.codeship.com/projects/254859"><img src="https://img.shields.io/codeship/cdd4ad20-a319-0135-c87c-02251d502cd2.svg" alt="Codeship Status"></a>
|
||||
<a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
|
||||
<a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
|
||||
<a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
|
||||
</p>
|
||||
|
||||
------
|
||||
|
||||
## Documentation
|
||||
|
||||
For full documentation, visit: https://tailwindcss.com/
|
||||
For full documentation, visit [tailwindcss.com](https://tailwindcss.com/).
|
||||
|
||||
## Contributing
|
||||
|
||||
If you're interested in contributing to Tailwind CSS, please read our [contributing docs](https://github.com/tailwindcss/tailwindcss/blob/master/.github/CONTRIBUTING.md) **before submitting a pull request**.
|
||||
|
||||
@ -2,20 +2,20 @@ import postcss from 'postcss'
|
||||
import plugin from '../src/lib/substituteClassApplyAtRules'
|
||||
|
||||
function run(input, opts = () => {}) {
|
||||
return postcss([plugin(opts)]).process(input)
|
||||
return postcss([plugin(opts)]).process(input)
|
||||
}
|
||||
|
||||
test("it copies a class's declarations into itself", () => {
|
||||
const output = '.a { color: red; } .b { color: red; }'
|
||||
const output = '.a { color: red; } .b { color: red; }'
|
||||
|
||||
return run('.a { color: red; } .b { @apply .a; }').then(result => {
|
||||
expect(result.css).toEqual(output)
|
||||
expect(result.warnings().length).toBe(0)
|
||||
})
|
||||
return run('.a { color: red; } .b { @apply .a; }').then(result => {
|
||||
expect(result.css).toEqual(output)
|
||||
expect(result.warnings().length).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
test("it doesn't copy a media query definition into itself", () => {
|
||||
const output = `.a {
|
||||
const output = `.a {
|
||||
color: red;
|
||||
}
|
||||
|
||||
@ -27,8 +27,8 @@ test("it doesn't copy a media query definition into itself", () => {
|
||||
color: red;
|
||||
}`
|
||||
|
||||
return run(
|
||||
`.a {
|
||||
return run(
|
||||
`.a {
|
||||
color: red;
|
||||
}
|
||||
|
||||
@ -38,15 +38,15 @@ test("it doesn't copy a media query definition into itself", () => {
|
||||
|
||||
.b {
|
||||
@apply .a;
|
||||
}`)
|
||||
.then(result => {
|
||||
expect(result.css).toEqual(output)
|
||||
expect(result.warnings().length).toBe(0)
|
||||
})
|
||||
}`
|
||||
).then(result => {
|
||||
expect(result.css).toEqual(output)
|
||||
expect(result.warnings().length).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
test('it fails if the class does not exist', () => {
|
||||
run('.b { @apply .a; }').catch(error => {
|
||||
expect(error.reason).toEqual('No .a class found.')
|
||||
})
|
||||
run('.b { @apply .a; }').catch(error => {
|
||||
expect(error.reason).toEqual('No .a class found.')
|
||||
})
|
||||
})
|
||||
|
||||
82
__tests__/configFunction.test.js
Normal file
82
__tests__/configFunction.test.js
Normal file
@ -0,0 +1,82 @@
|
||||
import postcss from 'postcss'
|
||||
import plugin from '../src/lib/evaluateTailwindFunctions'
|
||||
|
||||
function run(input, opts = {}) {
|
||||
return postcss([plugin(() => opts)]).process(input)
|
||||
}
|
||||
|
||||
test('it looks up values in the config using dot notation', () => {
|
||||
const input = `
|
||||
.banana { color: config('colors.yellow'); }
|
||||
`
|
||||
|
||||
const output = `
|
||||
.banana { color: #f7cc50; }
|
||||
`
|
||||
|
||||
return run(input, {
|
||||
colors: {
|
||||
yellow: '#f7cc50',
|
||||
},
|
||||
}).then(result => {
|
||||
expect(result.css).toEqual(output)
|
||||
expect(result.warnings().length).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
test('quotes are optional around the lookup path', () => {
|
||||
const input = `
|
||||
.banana { color: config(colors.yellow); }
|
||||
`
|
||||
|
||||
const output = `
|
||||
.banana { color: #f7cc50; }
|
||||
`
|
||||
|
||||
return run(input, {
|
||||
colors: {
|
||||
yellow: '#f7cc50',
|
||||
},
|
||||
}).then(result => {
|
||||
expect(result.css).toEqual(output)
|
||||
expect(result.warnings().length).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
test('a default value can be provided', () => {
|
||||
const input = `
|
||||
.cookieMonster { color: config('colors.blue', #0000ff); }
|
||||
`
|
||||
|
||||
const output = `
|
||||
.cookieMonster { color: #0000ff; }
|
||||
`
|
||||
|
||||
return run(input, {
|
||||
colors: {
|
||||
yellow: '#f7cc50',
|
||||
},
|
||||
}).then(result => {
|
||||
expect(result.css).toEqual(output)
|
||||
expect(result.warnings().length).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
test('quotes are preserved around default values', () => {
|
||||
const input = `
|
||||
.heading { font-family: config('fonts.sans', "Helvetica Neue"); }
|
||||
`
|
||||
|
||||
const output = `
|
||||
.heading { font-family: "Helvetica Neue"; }
|
||||
`
|
||||
|
||||
return run(input, {
|
||||
fonts: {
|
||||
serif: 'Constantia',
|
||||
},
|
||||
}).then(result => {
|
||||
expect(result.css).toEqual(output)
|
||||
expect(result.warnings().length).toBe(0)
|
||||
})
|
||||
})
|
||||
@ -1,6 +1,3 @@
|
||||
import postcss from 'postcss'
|
||||
import fs from 'fs'
|
||||
import _ from 'lodash'
|
||||
import c from '../src/util/collapseWhitespace'
|
||||
import defineClass from '../src/util/defineClass'
|
||||
|
||||
@ -8,21 +5,23 @@ import defineClass from '../src/util/defineClass'
|
||||
* Tests
|
||||
*/
|
||||
it('creates a proper single-word class with rules', () => {
|
||||
let output = defineClass('flex', {display: 'flex'})
|
||||
let output = defineClass('flex', { display: 'flex' })
|
||||
expect(c(output.toString())).toEqual(`.flex { display: flex }`)
|
||||
})
|
||||
|
||||
it('does not modify the case of selector names', () => {
|
||||
let output = defineClass('inlineBlock', {display: 'inline-block'})
|
||||
let output = defineClass('inlineBlock', { display: 'inline-block' })
|
||||
expect(c(output.toString())).toEqual(`.inlineBlock { display: inline-block }`)
|
||||
})
|
||||
|
||||
it('does not modify the case of property names', () => {
|
||||
let output = defineClass('smooth', {'-webkit-font-smoothing': 'antialiased'})
|
||||
let output = defineClass('smooth', {
|
||||
'-webkit-font-smoothing': 'antialiased',
|
||||
})
|
||||
expect(c(output.toString())).toEqual(`.smooth { -webkit-font-smoothing: antialiased }`)
|
||||
})
|
||||
|
||||
it('escapes non-standard characters in selectors', () => {
|
||||
let output = defineClass('w-1/4', {'width': '25%'})
|
||||
let output = defineClass('w-1/4', { width: '25%' })
|
||||
expect(c(output.toString())).toEqual(`.w-1\\/4 { width: 25% }`)
|
||||
})
|
||||
|
||||
@ -1,6 +1,3 @@
|
||||
import postcss from 'postcss'
|
||||
import fs from 'fs'
|
||||
import _ from 'lodash'
|
||||
import c from '../src/util/collapseWhitespace'
|
||||
import defineClasses from '../src/util/defineClasses'
|
||||
|
||||
@ -9,7 +6,7 @@ import defineClasses from '../src/util/defineClasses'
|
||||
*/
|
||||
it('it generates a set of helper classes from a config', () => {
|
||||
let output = defineClasses({
|
||||
'flex': {
|
||||
flex: {
|
||||
display: 'flex',
|
||||
},
|
||||
'inline-flex': {
|
||||
|
||||
@ -548,7 +548,8 @@ textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
color: inherit;
|
||||
opacity: .5;
|
||||
}
|
||||
@ -586,6 +587,12 @@ button,
|
||||
}
|
||||
}
|
||||
|
||||
.list-reset {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.appearance-none {
|
||||
appearance: none;
|
||||
}
|
||||
@ -672,7 +679,7 @@ button,
|
||||
}
|
||||
|
||||
.font-sans {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
.font-serif {
|
||||
@ -2982,10 +2989,18 @@ button,
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.mr-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.mb-auto {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -2995,6 +3010,15 @@ button,
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.my-auto {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.m-auto {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.-mt-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -3517,18 +3541,18 @@ button,
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.list-reset {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:list-reset {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sm\:appearance-none {
|
||||
appearance: none;
|
||||
}
|
||||
@ -3615,7 +3639,7 @@ button,
|
||||
}
|
||||
|
||||
.sm\:font-sans {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
.sm\:font-serif {
|
||||
@ -5925,10 +5949,18 @@ button,
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.sm\:mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.sm\:mr-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.sm\:mb-auto {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.sm\:ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -5938,6 +5970,15 @@ button,
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.sm\:my-auto {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.sm\:m-auto {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.sm\:-mt-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -6460,12 +6501,6 @@ button,
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.sm\:list-reset {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sm\:example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
@ -6473,6 +6508,12 @@ button,
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.md\:list-reset {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md\:appearance-none {
|
||||
appearance: none;
|
||||
}
|
||||
@ -6559,7 +6600,7 @@ button,
|
||||
}
|
||||
|
||||
.md\:font-sans {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
.md\:font-serif {
|
||||
@ -8869,10 +8910,18 @@ button,
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.md\:mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.md\:mr-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.md\:mb-auto {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.md\:ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -8882,6 +8931,15 @@ button,
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.md\:my-auto {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.md\:m-auto {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.md\:-mt-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -9404,12 +9462,6 @@ button,
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.md\:list-reset {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md\:example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
@ -9417,6 +9469,12 @@ button,
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.lg\:list-reset {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.lg\:appearance-none {
|
||||
appearance: none;
|
||||
}
|
||||
@ -9503,7 +9561,7 @@ button,
|
||||
}
|
||||
|
||||
.lg\:font-sans {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
.lg\:font-serif {
|
||||
@ -11813,10 +11871,18 @@ button,
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.lg\:mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.lg\:mr-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.lg\:mb-auto {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.lg\:ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -11826,6 +11892,15 @@ button,
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.lg\:my-auto {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.lg\:m-auto {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.lg\:-mt-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -12348,12 +12423,6 @@ button,
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.lg\:list-reset {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.lg\:example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
@ -12361,6 +12430,12 @@ button,
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.xl\:list-reset {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.xl\:appearance-none {
|
||||
appearance: none;
|
||||
}
|
||||
@ -12447,7 +12522,7 @@ button,
|
||||
}
|
||||
|
||||
.xl\:font-sans {
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
.xl\:font-serif {
|
||||
@ -14757,10 +14832,18 @@ button,
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.xl\:mt-auto {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.xl\:mr-auto {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.xl\:mb-auto {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.xl\:ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -14770,6 +14853,15 @@ button,
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.xl\:my-auto {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.xl\:m-auto {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.xl\:-mt-0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -15292,12 +15384,6 @@ button,
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.xl\:list-reset {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.xl\:example {
|
||||
font-weight: 700;
|
||||
color: #e3342f;
|
||||
|
||||
@ -5,7 +5,7 @@ function run(input, opts = () => {}) {
|
||||
return postcss([plugin(opts)]).process(input)
|
||||
}
|
||||
|
||||
test("it adds a focusable variant to each nested class definition", () => {
|
||||
test('it adds a focusable variant to each nested class definition', () => {
|
||||
const input = `
|
||||
@focusable {
|
||||
.banana { color: yellow; }
|
||||
|
||||
@ -5,7 +5,7 @@ function run(input, opts = () => {}) {
|
||||
return postcss([plugin(opts)]).process(input)
|
||||
}
|
||||
|
||||
test("it adds a hoverable variant to each nested class definition", () => {
|
||||
test('it adds a hoverable variant to each nested class definition', () => {
|
||||
const input = `
|
||||
@hoverable {
|
||||
.banana { color: yellow; }
|
||||
|
||||
7
__tests__/importsConfig.test.js
Normal file
7
__tests__/importsConfig.test.js
Normal file
@ -0,0 +1,7 @@
|
||||
import tailwind from '../src/index'
|
||||
import config from '../defaultConfig.js'
|
||||
|
||||
test('it can accept a config file', () => {
|
||||
tailwind('./defaultConfig.js')
|
||||
expect(tailwind.defaultConfig()).toEqual(config)
|
||||
})
|
||||
@ -12,12 +12,23 @@ it('generates the right CSS', () => {
|
||||
return postcss([tailwind()])
|
||||
.process(input)
|
||||
.then(result => {
|
||||
const expected = fs.readFileSync(path.resolve(`${__dirname}/fixtures/tailwind-output.css`), 'utf8')
|
||||
const expected = fs.readFileSync(
|
||||
path.resolve(`${__dirname}/fixtures/tailwind-output.css`),
|
||||
'utf8'
|
||||
)
|
||||
|
||||
expect(result.css).toBe(expected)
|
||||
})
|
||||
})
|
||||
|
||||
it('does not add any CSS if no Tailwind features are used', () => {
|
||||
return postcss([tailwind()])
|
||||
.process('')
|
||||
.then(result => {
|
||||
expect(result.css).toBe('')
|
||||
})
|
||||
})
|
||||
|
||||
it('generates the right CSS with implicit screen utilities', () => {
|
||||
const input = fs.readFileSync(path.resolve(`${__dirname}/fixtures/tailwind-input-with-explicit-screen-utilities.css`), 'utf8')
|
||||
|
||||
|
||||
@ -536,7 +536,7 @@ svg { fill: currentColor; }
|
||||
|
||||
button, input, optgroup, select, textarea { font-family: inherit; }
|
||||
|
||||
input::placeholder {
|
||||
input::placeholder, textarea::placeholder {
|
||||
color: inherit;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
@ -204,6 +204,7 @@ module.exports = {
|
||||
'Fira Sans',
|
||||
'Droid Sans',
|
||||
'Helvetica Neue',
|
||||
'sans-serif',
|
||||
],
|
||||
'serif': [
|
||||
'Constantia',
|
||||
@ -720,13 +721,13 @@ module.exports = {
|
||||
*/
|
||||
|
||||
zIndex: {
|
||||
'auto': 'auto',
|
||||
'0': 0,
|
||||
'10': 10,
|
||||
'20': 20,
|
||||
'30': 30,
|
||||
'40': 40,
|
||||
'50': 50,
|
||||
'auto': 'auto',
|
||||
},
|
||||
|
||||
|
||||
|
||||
2
dist/.gitignore
vendored
Normal file
2
dist/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
*
|
||||
!.gitignore
|
||||
573
dist/preflight.css
vendored
573
dist/preflight.css
vendored
@ -1,573 +0,0 @@
|
||||
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details,
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Manually forked from SUIT CSS Base: https://github.com/suitcss/base
|
||||
* A thin layer on top of normalize.css that provides a starting point more
|
||||
* suitable for web applications.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Prevent padding and border from affecting element width
|
||||
* https://goo.gl/pYtbK7
|
||||
* 2. Change the default font family in all browsers (opinionated)
|
||||
*/
|
||||
|
||||
html {
|
||||
box-sizing: border-box; /* 1 */
|
||||
font-family: sans-serif; /* 2 */
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the default spacing and border for appropriate elements.
|
||||
*/
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
figure,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Work around a Firefox/IE bug where the transparent `button` background
|
||||
* results in a loss of the default `button` focus styles.
|
||||
*/
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||
* This prevents an unwanted focus outline from appearing around elements that
|
||||
* might still respond to pointer events.
|
||||
*/
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tailwind custom reset styles
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: inherit;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
button,
|
||||
[role=button] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=preflight.css.map */
|
||||
1
dist/preflight.css.map
vendored
1
dist/preflight.css.map
vendored
File diff suppressed because one or more lines are too long
1
dist/preflight.min.css
vendored
1
dist/preflight.min.css
vendored
@ -1 +0,0 @@
|
||||
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}html{box-sizing:border-box;font-family:sans-serif}*,::after,::before{box-sizing:inherit}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,p,pre{margin:0}button{background:0 0;border:0;padding:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset{border:0;margin:0;padding:0}iframe{border:0}[tabindex="-1"]:focus{outline:0!important}textarea{resize:vertical}img{max-width:100%}svg{fill:currentColor}button,input,optgroup,select,textarea{font-family:inherit}input::placeholder{color:inherit;opacity:.5}[role=button],button{cursor:pointer}
|
||||
15282
dist/tailwind.css
vendored
15282
dist/tailwind.css
vendored
File diff suppressed because it is too large
Load Diff
1
dist/tailwind.css.map
vendored
1
dist/tailwind.css.map
vendored
File diff suppressed because one or more lines are too long
1
dist/tailwind.min.css
vendored
1
dist/tailwind.min.css
vendored
File diff suppressed because one or more lines are too long
14722
dist/utilities.css
vendored
14722
dist/utilities.css
vendored
File diff suppressed because it is too large
Load Diff
1
dist/utilities.css.map
vendored
1
dist/utilities.css.map
vendored
File diff suppressed because one or more lines are too long
1
dist/utilities.min.css
vendored
1
dist/utilities.min.css
vendored
File diff suppressed because one or more lines are too long
1
docs/.gitignore
vendored
1
docs/.gitignore
vendored
@ -1,3 +1,4 @@
|
||||
/build_production/
|
||||
/build_local/
|
||||
/node_modules/
|
||||
/vendor/
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
{
|
||||
"scripts": {
|
||||
"dev": "npm run compile-css-js && ./vendor/bin/jigsaw build",
|
||||
"compile-css-js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"watch-js": "chokidar 'source/_assets/js/**/*' --initial=true -c 'npm run compile-css-js'",
|
||||
"watch-css": "chokidar 'tailwind.js' 'source/_assets/less/**/*' --initial=true -c 'npm run compile-css-js'",
|
||||
"watch-templates": "chokidar 'source/**/*' --initial=true -c './vendor/bin/jigsaw build'",
|
||||
"watch": "concurrently \"npm run watch-css\" \"npm run watch-js\" \"npm run watch-templates\"",
|
||||
"prod": "npm run production && ./vendor/bin/jigsaw build production",
|
||||
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
|
||||
"local": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=local --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"staging": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=staging --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"production": "cross-env NODE_ENV=development webpack --progress --hide-modules --env=production --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"dev": "npm run local",
|
||||
"prod": "npm run production",
|
||||
"watch": "npm run local -- --watch"
|
||||
},
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
@ -15,18 +13,18 @@
|
||||
"cross-env": "^3.2.3",
|
||||
"escape-html": "^1.0.3",
|
||||
"laravel-mix": "^1.5.1",
|
||||
"prismjs": "^1.8.3",
|
||||
"vue": "^2.5.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"chokidar-cli": "^1.2.0",
|
||||
"concurrently": "^3.5.0",
|
||||
"less": "^2.7.2",
|
||||
"less-loader": "^4.0.5",
|
||||
"lodash": "^4.17.4",
|
||||
"node-cmd": "^3.0.0",
|
||||
"normalize.css": "^7.0.0",
|
||||
"on-build-webpack": "^0.1.0",
|
||||
"postcss-cssnext": "^3.0.2",
|
||||
"stylefmt": "^6.0.0"
|
||||
"prismjs": "^1.8.3",
|
||||
"stylefmt": "^6.0.0",
|
||||
"vue": "^2.5.2",
|
||||
"webpack-watch": "^0.2.0",
|
||||
"yargs": "^10.0.3"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%"
|
||||
|
||||
@ -13,3 +13,10 @@ const app = new Vue({
|
||||
Prism.highlightAll()
|
||||
anchors.options = { placement: 'left', class: 'text-slate-light' };
|
||||
anchors.add();
|
||||
|
||||
// Add shortcut to search input when pressing the "/" key
|
||||
document.onkeyup = function (e) {
|
||||
if (e.which == 191) {
|
||||
document.getElementById('docsearch').focus();
|
||||
}
|
||||
};
|
||||
|
||||
37
docs/source/_assets/less/docsearch.less
Normal file
37
docs/source/_assets/less/docsearch.less
Normal file
@ -0,0 +1,37 @@
|
||||
.algolia-autocomplete {
|
||||
width: 100% !important;
|
||||
|
||||
[class^="ds-dataset-"] {
|
||||
.algolia-docsearch-suggestion--text {
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
box-shadow: inset 0 -2px 0 0 rgba(68, 168, 179,.8);
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: config('colors.tailwind-teal');
|
||||
background: rgba(68, 168, 179, .1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: config('screens.md')) {
|
||||
.ds-dropdown-menu {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--subcategory-column {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--content {
|
||||
width: 100% !important;
|
||||
padding: 0 !important;
|
||||
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -18,6 +18,7 @@ ul {
|
||||
@apply .list-reset;
|
||||
}
|
||||
|
||||
@import "docsearch";
|
||||
@import "prism";
|
||||
@import "markdown";
|
||||
|
||||
|
||||
@ -1,11 +1,17 @@
|
||||
@extends('_layouts.master')
|
||||
|
||||
@section('meta')
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@tailwindcss">
|
||||
<meta name="twitter:title" content="{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development' }}">
|
||||
<meta name="twitter:description" content="{{ $page->description ? $page->description : 'Documentation for the Tailwind CSS framework.' }}">
|
||||
<meta name="twitter:image" content="https://tailwindcss.com/img/tailwind-square.png">
|
||||
<meta name="twitter:creator" content="@tailwindcss">
|
||||
@endsection
|
||||
|
||||
@section('body')
|
||||
<div class="min-h-screen">
|
||||
<div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll scrolling-touch bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col">
|
||||
<div id="sidebar" class="hidden z-50 fixed pin-y pin-l overflow-y-scroll md:overflow-visible scrolling-touch md:scrolling-auto bg-smoke-light w-4/5 md:w-full md:max-w-xs flex-none border-r-2 border-smoke md:flex flex-col">
|
||||
<div class="border-b border-smoke flex-none px-8 py-6">
|
||||
<div class="mb-4">
|
||||
<div class="hidden md:flex md:justify-center">
|
||||
@ -14,11 +20,11 @@
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-center">
|
||||
<a href="https://github.com/tailwindcss/tailwindcss" class="text-sm hover:text-grey-dark text-grey font-semibold">v{{ $page->version }}</a>
|
||||
<a href="https://github.com/tailwindcss/tailwindcss/releases" class="text-sm hover:text-grey-dark text-grey font-semibold">v{{ $page->version }}</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="relative opacity-75">
|
||||
<input class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full cursor-not-allowed" type="text" placeholder="Search coming soon!" disabled>
|
||||
<div class="relative">
|
||||
<input id="docsearch" class="rounded bg-white border border-smoke py-2 pr-4 pl-10 block w-full" type="text" placeholder="Search the docs">
|
||||
<div class="pointer-events-none absolute pin-y pin-l pl-3 flex items-center">
|
||||
<svg class="pointer-events-none text-slate w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
|
||||
</div>
|
||||
@ -159,6 +165,7 @@
|
||||
<li class="mb-3"><a class="hover:underline {{ $page->active('/docs/examples/buttons') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/examples/buttons">Buttons</a></li>
|
||||
<li class="mb-3"><a class="hover:underline {{ $page->active('/docs/examples/cards') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/examples/cards">Cards</a></li>
|
||||
<li class="mb-3"><a class="hover:underline {{ $page->active('/docs/examples/forms') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/examples/forms">Forms</a></li>
|
||||
<li class="mb-3"><a class="hover:underline {{ $page->active('/docs/examples/navigation') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/examples/navigation">Navigation</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
@ -183,6 +190,18 @@
|
||||
<div id="content" class="px-6 pb-8 pt-20 md:pt-16 w-full max-w-lg mx-auto">
|
||||
<div id="app" v-cloak>
|
||||
<div class="markdown">
|
||||
<h1>{{ $page->title }}</h1>
|
||||
|
||||
@if($page->description)
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
{{ $page->description }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($page->features)
|
||||
@include('_partials.feature-badges', $page->features->all())
|
||||
@endif
|
||||
|
||||
@yield('content')
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -15,21 +15,32 @@
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
<title>{{ $page->title ? $page->title . ' - Tailwind CSS' : 'Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development' }}</title>
|
||||
<style>
|
||||
@import url("https://use.typekit.net/iqy1okj.css");
|
||||
@import url("https://use.typekit.net/iqy1okj.css");
|
||||
</style>
|
||||
<link rel="stylesheet" href="{{ mix('/css/main.css') }}">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
|
||||
<script src="{{ mix('/js/nav.js') }}"></script>
|
||||
</head>
|
||||
<body data-sidebar-visible="true" class="font-sans font-normal text-slate-darker leading-normal">
|
||||
@yield('body')
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109068504-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
@if ($page->production)
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
docsearch({
|
||||
apiKey: '3df93446658cd9c4e314d4c02a052188',
|
||||
indexName: 'tailwindcss',
|
||||
inputSelector: '#docsearch',
|
||||
});
|
||||
</script>
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-109068504-1"></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
|
||||
gtag('config', 'UA-109068504-1');
|
||||
</script>
|
||||
gtag('config', 'UA-109068504-1');
|
||||
</script>
|
||||
@endif
|
||||
</body>
|
||||
</html>
|
||||
|
||||
13
docs/source/_partials/work-in-progress-example.blade.md
Normal file
13
docs/source/_partials/work-in-progress-example.blade.md
Normal file
@ -0,0 +1,13 @@
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed examples are coming soon.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Adding New Utilities"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Adding New Utilities
|
||||
|
||||
Although Tailwind provides a pretty comprehensive set of utility classes out of the box, you're inevitably going to run into situations where you need to add a few of your own.
|
||||
|
||||
Deciding on the best way to extend a framework can be paralyzing, so here's some best practices and tools to help you add your own utilities "the Tailwind way."
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Backgrounds"
|
||||
title: "Background Color"
|
||||
description: "Utilities for controlling an element's background color."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: true
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Background Color
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling an element's background color.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => true,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Background Position"
|
||||
description: "Utilities for controlling the position of an element's background image."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Background Position
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the position of an element's background image.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Background Size"
|
||||
description: "Utilities for controlling the background size of an element's background image."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Background Size
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the background size of an element's background image.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Border Color"
|
||||
description: "Utilities for controlling the color of an element's borders."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: true
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Border Color
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the color of an element's borders.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => true,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Border Radius"
|
||||
description: "Utilities for controlling the border radius of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Border Radius
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the border radius of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse; table-layout: fixed;">
|
||||
<colgroup>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Border Style"
|
||||
description: "Utilities for controlling the style of an element's borders."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Border Style
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the style of an element's borders.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Border Width"
|
||||
description: "Utilities for controlling the width an element's borders."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Border Width
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the width an element's borders.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
Add borders to any element using the `.border{-side?}{-width?}` syntax.
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Colors"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Colors
|
||||
|
||||
Developing an organized, consistent and beautiful color palette is critical to the design success of a project. Tailwind provides a fantastic color system that makes this very easy to accomplish.
|
||||
|
||||
## Default color palette
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Configuration"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Configuration
|
||||
|
||||
Tailwind's defining feature is its ability to be customized. We understand that no two projects are the same, so why should the CSS framework you use be? Tailwind provides developers with a helpful set of front-end conventions, while still leaving room for adjustments where appropriate. This is all done using the Tailwind config file.
|
||||
|
||||
## Introducing the Tailwind config
|
||||
|
||||
The Tailwind config file is where you customize Tailwind specifically for your project. It will include your colour palette, fonts, text weights, spacing and sizing definitions, borders, shadows, and much more. Think of the Tailwind config as a living definition of your design system.
|
||||
The Tailwind config file is where you customize Tailwind specifically for your project. It will include your color palette, fonts, text weights, spacing and sizing definitions, borders, shadows, and much more. Think of the Tailwind config as a living definition of your design system.
|
||||
|
||||
Tailwind is actually built on PostCSS and therefore is configured entirely in JavaScript. This can feel a little strange at first, especially if you're more familiar with setting variables in a preprocessor like Sass or Less. In practice though, defining your CSS configuration in a real programming language like JavaScript has a lot of benefits. You can create variables to share parts of your configuration. You have the full power of JavaScript to dynamically create or manipulate values. Eventually you may even be able to automatically generate custom documentation for your project from this config file.
|
||||
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Container"
|
||||
description: "A component for fixing an element's width to the current breakpoint."
|
||||
---
|
||||
|
||||
# Container
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
A component for fixing an element's width to the current breakpoint.
|
||||
</div>
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Cursor"
|
||||
description: "Utilities for controlling the cursor style when hovering over an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Cursor
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the cursor style when hovering over an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Display"
|
||||
description: "Utilities for controlling the display box type of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Display
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the display box type of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,32 +1,19 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Alerts"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Alerts
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed documentation is coming soon, but in the meantime here's a bunch of quick examples.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
### Traditional
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative">
|
||||
<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative" role="alert">
|
||||
<strong class="font-bold">Holy smokes!</strong>
|
||||
<span class="block sm:inline">Something seriously bad happened.</span>
|
||||
<span class="absolute pin-t pin-b pin-r px-4 py-3">
|
||||
<svg class="h-6 w-6 text-red" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
|
||||
<svg class="h-6 w-6 text-red" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
|
||||
</span>
|
||||
</div>
|
||||
@endcomponent
|
||||
@ -34,7 +21,7 @@ title: "Alerts"
|
||||
### Left Accent Border
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
|
||||
<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4" role="alert">
|
||||
<p class="font-bold">Be Warned</p>
|
||||
<p>Something not ideal might be happening.</p>
|
||||
</div>
|
||||
@ -43,7 +30,7 @@ title: "Alerts"
|
||||
### Titled
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div>
|
||||
<div role="alert">
|
||||
<div class="bg-red text-white font-bold rounded rounded-t px-4 py-2">
|
||||
Danger
|
||||
</div>
|
||||
@ -56,7 +43,7 @@ title: "Alerts"
|
||||
### Solid
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="flex items-center bg-blue text-white text-sm font-bold px-4 py-3">
|
||||
<div class="flex items-center bg-blue text-white text-sm font-bold px-4 py-3" role="alert">
|
||||
<svg class="w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
|
||||
<p>
|
||||
Something happened that you should know about.
|
||||
@ -67,7 +54,7 @@ title: "Alerts"
|
||||
### Top Accent Border
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="bg-teal-lightest border-t-4 border-teal rounded rounded-b text-teal-darkest px-4 py-3 shadow-md">
|
||||
<div class="bg-teal-lightest border-t-4 border-teal rounded rounded-b text-teal-darkest px-4 py-3 shadow-md" role="alert">
|
||||
<div class="flex">
|
||||
<svg class="h-6 w-6 text-teal mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
|
||||
<div>
|
||||
@ -81,7 +68,7 @@ title: "Alerts"
|
||||
### Banner
|
||||
|
||||
@component('_partials.code-sample', ['lang' => 'html'])
|
||||
<div class="bg-blue-lightest border-t border-b border-blue text-blue-dark px-4 py-3">
|
||||
<div class="bg-blue-lightest border-t border-b border-blue text-blue-dark px-4 py-3" role="alert">
|
||||
<p class="font-bold">Informational message</p>
|
||||
<p class="text-sm">Some additional text to explain said message.</p>
|
||||
</div>
|
||||
|
||||
@ -1,23 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Buttons"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Buttons
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed documentation is coming soon, but in the meantime here's a bunch of quick examples.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
### Simple
|
||||
|
||||
|
||||
@ -1,29 +1,16 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Cards"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Cards
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed examples are coming soon.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
## Stacked
|
||||
|
||||
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
|
||||
<div class="max-w-sm rounded overflow-hidden shadow-lg">
|
||||
<img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg">
|
||||
<img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg" alt="Sunset in the mountains">
|
||||
<div class="px-6 py-4">
|
||||
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
|
||||
<p class="text-grey-darker text-base">
|
||||
@ -43,7 +30,7 @@ title: "Cards"
|
||||
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
|
||||
<div class="max-w-md flex">
|
||||
<div class="rounded rounded-l w-128 text-center overflow-hidden">
|
||||
<img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg">
|
||||
<img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg" alt="Woman holding a mug">
|
||||
</div>
|
||||
<div class="border-t border-r border-b border-grey-light rounded rounded-r p-4 flex flex-col justify-between">
|
||||
<div>
|
||||
@ -55,7 +42,7 @@ title: "Cards"
|
||||
<p class="text-grey-darker text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg">
|
||||
<img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg" alt="Avatar of Jonathan Reinink">
|
||||
<div class="text-sm">
|
||||
<p class="text-black leading-none">Jonathan Reinink</p>
|
||||
<p class="text-grey-dark">Aug 18</p>
|
||||
|
||||
@ -1,23 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Forms"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Forms
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed examples are coming soon.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
## Login Form
|
||||
|
||||
@ -132,11 +119,11 @@ title: "Forms"
|
||||
<input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-city" type="text" placeholder="Albuquerque">
|
||||
</div>
|
||||
<div class="md:w-1/2 px-3">
|
||||
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-select">
|
||||
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
|
||||
State
|
||||
</label>
|
||||
<div class="relative">
|
||||
<select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded">
|
||||
<select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded" id="grid-state">
|
||||
<option>New Mexico</option>
|
||||
<option>Missouri</option>
|
||||
<option>Texas</option>
|
||||
@ -162,7 +149,7 @@ title: "Forms"
|
||||
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
|
||||
<form class="w-full max-w-sm">
|
||||
<div class="flex items-center border-b border-b-2 border-teal py-2">
|
||||
<input class="appearance-none bg-transparent border-none w-full text-grey-darker mr-3 py-1 px-2" id="underline-full-name" type="text" placeholder="Jane Doe">
|
||||
<input class="appearance-none bg-transparent border-none w-full text-grey-darker mr-3 py-1 px-2" type="text" placeholder="Jane Doe" aria-label="Full name">
|
||||
<button class="flex-no-shrink bg-teal hover:bg-teal-dark border-teal hover:border-teal-dark text-sm border-4 text-white py-1 px-2 rounded" type="button">
|
||||
Sign Up
|
||||
</button>
|
||||
|
||||
125
docs/source/docs/examples/navigation.blade.md
Normal file
125
docs/source/docs/examples/navigation.blade.md
Normal file
@ -0,0 +1,125 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Navigation"
|
||||
description: null
|
||||
---
|
||||
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
## Simple
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex">
|
||||
<li class="mr-6">
|
||||
<a class="text-blue hover:text-blue-darker" href="#">Active</a>
|
||||
</li>
|
||||
<li class="mr-6">
|
||||
<a class="text-blue hover:text-blue-darker" href="#">Link</a>
|
||||
</li>
|
||||
<li class="mr-6">
|
||||
<a class="text-blue hover:text-blue-darker" href="#">Link</a>
|
||||
</li>
|
||||
<li class="mr-6">
|
||||
<a class="text-grey-light cursor-not-allowed" href="#">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endcomponent
|
||||
|
||||
## Responsive Header
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<nav class="flex items-center justify-between flex-wrap bg-teal p-6">
|
||||
<div class="flex items-center flex-no-shrink text-white mr-6">
|
||||
<svg class="h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
|
||||
<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
|
||||
</div>
|
||||
<div class="block lg:hidden">
|
||||
<button class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
|
||||
<svg class="h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
|
||||
<div class="text-sm lg:flex-grow">
|
||||
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
|
||||
Docs
|
||||
</a>
|
||||
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white mr-4">
|
||||
Examples
|
||||
</a>
|
||||
<a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-lighter hover:text-white">
|
||||
Blog
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal hover:bg-white mt-4 lg:mt-0">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@endcomponent
|
||||
|
||||
## Tabs
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex border-b">
|
||||
<li class="-mb-px mr-1">
|
||||
<a class="bg-white inline-block border-l border-t border-r rounded rounded-t py-2 px-4 text-blue-dark font-semibold" href="#">Active</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a class="bg-white inline-block py-2 px-4 text-blue hover:text-blue-darker font-semibold" href="#">Tab</a>
|
||||
</li>
|
||||
<li class="mr-1">
|
||||
<a class="bg-white inline-block py-2 px-4 text-grey-light font-semibold" href="#">Tab</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endcomponent
|
||||
|
||||
## Pills
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex">
|
||||
<li class="mr-3">
|
||||
<a class="inline-block border border-blue rounded py-1 px-3 bg-blue text-white" href="#">Active Pill</a>
|
||||
</li>
|
||||
<li class="mr-3">
|
||||
<a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-1 px-3" href="#">Pill</a>
|
||||
</li>
|
||||
<li class="mr-3">
|
||||
<a class="inline-block py-1 px-3 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endcomponent
|
||||
|
||||
## Stretched
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex">
|
||||
<li class="flex-1 mr-2">
|
||||
<a class="text-center block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Item</a>
|
||||
</li>
|
||||
<li class="flex-1 mr-2">
|
||||
<a class="text-center block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Nav Item</a>
|
||||
</li>
|
||||
<li class="text-center flex-1">
|
||||
<a class="block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Item</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endcomponent
|
||||
|
||||
## Justified
|
||||
|
||||
@component('_partials.code-sample')
|
||||
<ul class="list-reset flex justify-between">
|
||||
<li class="mr-3">
|
||||
<a class="inline-block border border-blue rounded py-2 px-4 bg-blue hover:bg-blue-dark text-white" href="#">Active Pill</a>
|
||||
</li>
|
||||
<li class="mr-3">
|
||||
<a class="inline-block border border-white rounded hover:border-grey-lighter text-blue hover:bg-grey-lighter py-2 px-4" href="#">Pill</a>
|
||||
</li>
|
||||
<li class="mr-3">
|
||||
<a class="inline-block py-2 px-4 text-grey-light cursor-not-allowed" href="#">Disabled Pill</a>
|
||||
</li>
|
||||
</ul>
|
||||
@endcomponent
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Extracting Components"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Extracting Components
|
||||
|
||||
Tailwind encourages a "utility-first" workflow, where new designs are initially implemented using only utility classes to avoid premature abstraction.
|
||||
|
||||
While we strongly believe you can get a lot further with just utilities than you might initially expect, **we don't believe that a dogmatic utility*-only* approach is the best way to write CSS.**
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Align Content - Flexbox"
|
||||
title: "Align Content"
|
||||
description: "Utilities for controlling how lines are positioned in multi-line flex containers."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Align Content
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how lines are positioned in multi-line flex containers.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Align Items - Flexbox"
|
||||
title: "Align Items"
|
||||
description: "Utilities for controlling how flex items are positioned along a container's cross axis."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Align Items
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how flex items are positioned along a container's cross axis.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Align Items - Flexbox"
|
||||
title: "Align Self"
|
||||
description: "Utilities for controlling how an individual flex item is positioned along its container's cross axis."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Align Self
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how an individual flex item is positioned along its container's cross axis.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flex Direction - Flexbox"
|
||||
title: "Flex Direction"
|
||||
description: "Utilities for controlling the direction of flex items."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Flex Direction
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the direction of flex items.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flex Display – Flexbox"
|
||||
title: "Flex Display"
|
||||
description: "Utilities for creating flex containers."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Flex Display
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for creating flex containers.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flex, Grow, & Shrink - Flexbox"
|
||||
title: "Flex, Grow, & Shrink"
|
||||
description: "Utilities for controlling how flex items grow and shrink."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Flex, Grow, & Shrink
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how flex items grow and shrink.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Justify Content - Flexbox"
|
||||
title: "Justify Content"
|
||||
description: "Utilities for controlling flex items are positioned along a container's main axis."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Justify Content
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling flex items are positioned along a container's main axis.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flex Wrapping - Flexbox"
|
||||
title: "Flex Wrapping"
|
||||
description: "Utilities for controlling how flex items wrap."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Flex Wrapping
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how flex items wrap.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Flexbox"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Flexbox
|
||||
|
||||
<div class="subnav">
|
||||
<a class="subnav-link" href="#usage">Usage</a>
|
||||
<a class="subnav-link" href="#responsive">Responsive</a>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Floats"
|
||||
description: "Utilities for controlling the wrapping of content around an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Floats
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the wrapping of content around an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Font Weight"
|
||||
description: "Utilities for controlling the font weight of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Font Weight
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the font weight of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Font Families"
|
||||
description: "Utilities for controlling the font family of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Font Families
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the font family of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Forms"
|
||||
description: "Utilities for styling form controls."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Forms
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for styling form controls.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Functions & Directives"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Functions & Directives
|
||||
|
||||
Tailwind exposes a few custom CSS functions and directives that can be used in your actual CSS files.
|
||||
|
||||
### `@@tailwind`
|
||||
@ -46,21 +45,25 @@ This is extremely useful when you find a common utility pattern in your HTML tha
|
||||
}
|
||||
```
|
||||
|
||||
Note that `@@apply` **will not work** for mixing in hover or responsive variants of another utility. Instead, mixin the plain version of that utility into the `:hover` pseudo-selector or a new media query:
|
||||
Note that `@@apply` **will not work** for mixing in hover or responsive variants of another utility. Instead, mix in the plain version of that utility into the `:hover` pseudo-selector or a new media query:
|
||||
|
||||
```less
|
||||
// Won't work:
|
||||
.btn {
|
||||
@@apply .block .bg-red;
|
||||
@@apply .md:inline-block;
|
||||
@@apply .hover:bg-blue;
|
||||
}
|
||||
|
||||
// Do this instead:
|
||||
.btn {
|
||||
&:hover {
|
||||
@@apply .bg-blue;
|
||||
}
|
||||
@@screen md {
|
||||
@@apply .block .bg-red;
|
||||
}
|
||||
.btn:hover {
|
||||
@@apply .bg-blue;
|
||||
}
|
||||
@@screen md {
|
||||
.btn {
|
||||
@@apply .inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,23 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Grid"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Grid
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
|
||||
<div class="flex">
|
||||
<div class="py-1">
|
||||
<svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold">Work in progress!</p>
|
||||
<p class="text-sm">More detailed documentation is coming soon, but in the meantime here are some quick and dirty examples.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@include('_partials.work-in-progress-example')
|
||||
|
||||
Basic grid example:
|
||||
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Height"
|
||||
description: "Utilities for setting the height of an element"
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Height
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the height of an element
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,36 +1,55 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Installation"
|
||||
description: "Quick start guide for installing and configuring Tailwind CSS."
|
||||
---
|
||||
|
||||
# Installation
|
||||
## CDN
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Quick start guide for installing and configuring Tailwind.
|
||||
</div>
|
||||
Before getting started please note, **many of the features that make Tailwind CSS great are not available using the CDN builds.** To take full advantage of Tailwind's features, [install Tailwind via npm](#npm).
|
||||
|
||||
## 1. Install Tailwind via npm
|
||||
To pull in Tailwind for quick demos or just giving the framework a spin, grab the latest default configuration build via CDN:
|
||||
|
||||
```html
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
|
||||
```
|
||||
|
||||
Or if you'd like to pull in the base styles separate from the utility classes:
|
||||
|
||||
```html
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/preflight.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Any of your own CSS would go here -->
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/utilities.min.css" rel="stylesheet">
|
||||
```
|
||||
|
||||
## NPM
|
||||
|
||||
For most projects (and to take advantage of Tailwind's customization features), you'll want to install Tailwind via npm.
|
||||
|
||||
### 1. Install Tailwind via npm
|
||||
|
||||
Tailwind is [available on npm](https://www.npmjs.com/package/tailwindcss) and can be installed using npm or Yarn.
|
||||
|
||||
<div class="bg-smoke-lighter font-mono text-sm p-4">
|
||||
<div class="rounded bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
|
||||
<div class="text-smoke-darker"># Using npm</div>
|
||||
<div class="text-purple-dark">npm install <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--save-dev</span></div>
|
||||
<div class="text-smoke-darker mt-6"># Using Yarn</div>
|
||||
<div class="text-purple-dark">yarn add <span class="text-blue-dark">tailwindcss</span> <span class="text-grey-darker">--dev</span></div>
|
||||
</div>
|
||||
|
||||
## 2. Create a Tailwind config file
|
||||
### 2. Create a Tailwind config file
|
||||
|
||||
Tailwind is configured almost entirely in plain JavaScript. To do this you'll need to generate a Tailwind config file for your project. We recommend creating a `tailwind.js` file in your project's root. We've provided a CLI utility to do this easily:
|
||||
Tailwind is configured almost entirely in plain JavaScript. To do this you'll need to generate a Tailwind config file for your project. We recommend creating a `tailwind.js` file in your project's root.
|
||||
|
||||
<div class="bg-smoke-lighter font-mono text-sm p-4">
|
||||
<div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-smoke-darker">[filename]</span></div>
|
||||
We've provided a CLI utility to do this easily:
|
||||
|
||||
<div class="rounded bg-smoke-lighter border-2 border-grey-light font-mono text-sm p-4">
|
||||
<div class="text-purple-dark">./node_modules/.bin/tailwind <span class="text-blue-dark">init</span> <span class="text-smoke-darker">[filename]</span></div>
|
||||
</div>
|
||||
|
||||
Alternatively, you can simply copy the default config file [from here](https://github.com/tailwindcss/tailwindcss/blob/master/defaultConfig.js).
|
||||
|
||||
## 3. Use Tailwind in your CSS
|
||||
### 3. Use Tailwind in your CSS
|
||||
|
||||
Use the `@@tailwind` directive to inject Tailwind's `preflight` and `utilities` styles into your CSS.
|
||||
|
||||
@ -52,12 +71,12 @@ To avoid specificity issues, we highly recommend structuring your main styleshee
|
||||
* override them.
|
||||
*
|
||||
* Example:
|
||||
*
|
||||
*
|
||||
* .btn { ... }
|
||||
* .form-input { ... }
|
||||
*
|
||||
* Or if using a preprocessor:
|
||||
*
|
||||
*
|
||||
* @@import "components/buttons";
|
||||
* @@import "components/forms";
|
||||
*/
|
||||
@ -78,15 +97,15 @@ To avoid specificity issues, we highly recommend structuring your main styleshee
|
||||
* .skew-45 { ... }
|
||||
*
|
||||
* Or if using a preprocessor..
|
||||
*
|
||||
* @@import "utilities/backgrond-patterns";
|
||||
*
|
||||
* @@import "utilities/background-patterns";
|
||||
* @@import "utilities/skew-transforms";
|
||||
*/
|
||||
```
|
||||
|
||||
## 4. Process your CSS with Tailwind
|
||||
### 4. Process your CSS with Tailwind
|
||||
|
||||
### Using Tailwind CLI
|
||||
#### Using Tailwind CLI
|
||||
|
||||
For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS:
|
||||
|
||||
@ -94,7 +113,7 @@ For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI
|
||||
<div class="text-purple-dark">./node_modules/.bin/tailwind build <span class="text-blue-dark">styles.css</span> <span class="text-smoke-darker">[-c ./config.js] [-o ./output.css]</span></div>
|
||||
</div>
|
||||
|
||||
### Using Tailwind with PostCSS
|
||||
#### Using Tailwind with PostCSS
|
||||
|
||||
For most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain.
|
||||
|
||||
@ -116,6 +135,8 @@ module.exports = {
|
||||
}
|
||||
```
|
||||
|
||||
For a complete example, check out our [webpack-starter](https://github.com/tailwindcss/webpack-starter) template.
|
||||
|
||||
#### Gulp
|
||||
|
||||
Add `tailwindcss` to the list of plugins you pass to [gulp-postcss](https://github.com/postcss/gulp-postcss), passing the path to your config file:
|
||||
@ -155,12 +176,12 @@ If you're using a preprocessor, use the `options` method to add `tailwindcss` as
|
||||
```js
|
||||
var tailwindcss = require('tailwindcss');
|
||||
|
||||
mix.less('source/_assets/less/main.less', 'source/css')
|
||||
mix.less('resources/assets/less/app.less', 'public/css')
|
||||
.options({
|
||||
postCss: [
|
||||
tailwindcss('./path/to/your/tailwind-config.js'),
|
||||
]
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
**Note for Sass users:** Due to [an unresolved issue](https://github.com/bholloway/resolve-url-loader/issues/28) with one of Mix's dependencies, to use Sass with Tailwind you'll need to disable `processCssUrls`:
|
||||
@ -169,10 +190,10 @@ mix.less('source/_assets/less/main.less', 'source/css')
|
||||
var tailwindcss = require('tailwindcss');
|
||||
|
||||
mix.sass('resources/assets/sass/app.scss', 'public/css')
|
||||
.options({
|
||||
processCssUrls: false,
|
||||
postCss: [ tailwindcss('path/to/config.js') ],
|
||||
});
|
||||
.options({
|
||||
processCssUrls: false,
|
||||
postCss: [ tailwindcss('./path/to/your/tailwind-config.js') ],
|
||||
});
|
||||
```
|
||||
|
||||
For more information on what this feature does and the implications of disabling it, [see the Laravel Mix documentation](https://github.com/JeffreyWay/laravel-mix/blob/master/docs/css-preprocessors.md#css-url-rewriting).
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Letter Spacing"
|
||||
description: "Utilities for controlling the tracking (letter spacing) of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Letter Spacing
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the tracking (letter spacing) of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Line Height"
|
||||
description: "Utilities for controlling the leading (line height) of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Line Height
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the leading (line height) of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Lists"
|
||||
description: "Utilities for controlling list styles."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Lists
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling list styles.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Max-Height"
|
||||
description: "Utilities for setting the maximum height of an element"
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Max-Height
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the maximum height of an element
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Max-Width"
|
||||
description: "Utilities for setting the maximum width of an element"
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Max-Width
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the maximum width of an element
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Min-Height"
|
||||
description: "Utilities for setting the minimum height of an element"
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Min-Height
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the minimum height of an element
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Min-Width"
|
||||
description: "Utilities for setting the minimum width of an element"
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Min-Width
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the minimum width of an element
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Opacity"
|
||||
description: "Utilities for controlling the opacity of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Opacity
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the opacity of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Overflow"
|
||||
description: "Utilities for controlling how an element handles content that is too large for the container."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Overflow
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how an element handles content that is too large for the container.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left overflow-x-scroll block" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
@ -49,7 +42,7 @@ title: "Overflow"
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-y-scroll</td>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark whitespace-no-wrap">overflow-y: auto;</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow horizontal scrolling if needed.</td>
|
||||
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Allow vertical scrolling if needed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark whitespace-no-wrap">.overflow-scroll</td>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Pointer Events"
|
||||
description: "Utilities for controlling whether an element responds to pointer events."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Pointer Events
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling whether an element responds to pointer events.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Positioning"
|
||||
descriptioj: "Utilities for controlling how an element is positioned in the DOM."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Positioning
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling how an element is positioned in the DOM.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<thead>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Resize"
|
||||
description: "Utilities for controlling the how a textarea can be resized."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Resize
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the how a textarea can be resized.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Responsive Design"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Responsive Design
|
||||
|
||||
Tailwind allows you to build responsive designs in the same way you build the rest of your design — using utility classes. Every utility in Tailwind is also available in screen-size specific variations. For example, the `.font-bold` utility can be used on small screen sizes using the `.sm:font-bold` class, on medium screen sizes using the `.md:font-bold` class, on large screen sizes using the `.lg:font-bold` class and on extra large screen sizes using the `.xl:font-bold` class.
|
||||
|
||||
This is done using predefined screen sizes (media query breakpoints), each of which are given a unique name like `sm`, `md`, `lg` and `xl`. By default Tailwind takes a "mobile first" approach, where each screen size represents a minimum viewport width. Any classes you apply at smaller screen sizes are also applied to larger sizes, unless of course you override them, which is the whole point! This approach, while simple, is actually very powerful and can be used to build complex, beautiful, responsive designs.
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Shadows"
|
||||
description: "Utilities for controlling the box shadow of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Shadows
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the box shadow of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Spacing"
|
||||
description: "Utilities for controlling an element's padding and margin."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Spacing
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling an element's padding and margin.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
Control an element's padding and margin using the `.p{side?}-{size}`, `.m{side?}-{size}`, and `.-m{side?}-{size}` utilities.
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "SVG"
|
||||
description: "Utilities for styling SVG elements."
|
||||
---
|
||||
|
||||
# SVG
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Useful utilities for styling SVG elements.
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
@include('_partials.work-in-progress')
|
||||
</div>
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
Tailwind doesn't provide SVG-specific utilites. Instead, use the generic sizing utilites to control an SVG's width and height, and the text color utilities to control an SVG's fill color.
|
||||
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Text Alignment"
|
||||
description: "Utilities for controlling the alignment of text."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Text Alignment
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the alignment of text.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Text Color"
|
||||
description: "Utilities for controlling the text color of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: true
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Text Color
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the text color of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => true,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Text Sizing"
|
||||
description: "Utilities for controlling the text size of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Text Sizing
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the text size of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Style & Decoration"
|
||||
description: "Utilities for controlling the style of text."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: true
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Text Style & Decoration
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the style of text.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => true,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "User Select"
|
||||
description: "Utilities for controlling whether the user can select text in an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# User Select
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling whether the user can select text in an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Vertical Alignment"
|
||||
description: "Utilities for controlling the vertical alignment of an inline or table-cell box."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Vertical Alignment
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the vertical alignment of an inline or table-cell box.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,22 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Visibility"
|
||||
description: "Utilities for controlling the visible of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: false
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Visibility
|
||||
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the visible of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => false,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "What is Tailwind?"
|
||||
description: null
|
||||
---
|
||||
|
||||
# What is Tailwind?
|
||||
|
||||
<div class="mt-8 text-2xl text-grey-dark mb-8">
|
||||
<p class="leading-tight">
|
||||
Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Whitespace & Wrapping"
|
||||
description: "Utilities for controlling the whitespace and wrapping of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Whitespace & Wrapping
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the whitespace and wrapping of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Width"
|
||||
description: "Utilities for setting the width of an element"
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Width
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for setting the width of an element
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
@include('_partials.work-in-progress')
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Working Utility-First"
|
||||
description: null
|
||||
---
|
||||
|
||||
# Working Utility-First
|
||||
|
||||
@ -1,21 +1,14 @@
|
||||
---
|
||||
extends: _layouts.documentation
|
||||
title: "Z-Index"
|
||||
description: "Utilities for controlling the stack order of an element."
|
||||
features:
|
||||
responsive: true
|
||||
customizable: true
|
||||
hover: false
|
||||
focus: false
|
||||
---
|
||||
|
||||
# Z-Index
|
||||
|
||||
<div class="text-xl text-slate-light mb-4">
|
||||
Utilities for controlling the stack order of an element.
|
||||
</div>
|
||||
|
||||
@include('_partials.feature-badges', [
|
||||
'responsive' => true,
|
||||
'customizable' => true,
|
||||
'hover' => false,
|
||||
'focus' => false
|
||||
])
|
||||
|
||||
<div class="border-t border-grey-lighter">
|
||||
<table class="w-full text-left" style="border-collapse: collapse;">
|
||||
<colgroup>
|
||||
|
||||
BIN
docs/source/img/tailwind-square.png
Normal file
BIN
docs/source/img/tailwind-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user