mirror of
https://github.com/tailwindlabs/tailwindcss.git
synced 2025-12-08 21:36:08 +00:00
Merge branch 'master' into develop
This commit is contained in:
Adam Wathan
commit
afc41252cf
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
|
||||
```
|
||||
20
README.md
20
README.md
@ -1,9 +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>
|
||||
|
||||
[ ](https://app.codeship.com/projects/254859)
|
||||
<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>
|
||||
|
||||
A utility-first CSS framework for rapidly building custom user interfaces.
|
||||
------
|
||||
|
||||
## 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**.
|
||||
|
||||
@ -158,8 +158,8 @@
|
||||
<li class="mb-3"><a class="hover:underline {{ $page->active('/docs/examples/alerts') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/examples/alerts">Alerts</a></li>
|
||||
<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/navigation') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}" href="{{ $page->baseUrl }}/docs/examples/navigation">Navigation</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>
|
||||
|
||||
@ -22,11 +22,11 @@ title: "Alerts"
|
||||
### 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 +34,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 +43,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 +56,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 +67,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 +81,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>
|
||||
|
||||
@ -23,7 +23,7 @@ title: "Cards"
|
||||
|
||||
@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 +43,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 +55,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>
|
||||
|
||||
@ -132,11 +132,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 +162,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>
|
||||
|
||||
@ -48,7 +48,7 @@ title: "Navigation"
|
||||
</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"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
|
||||
<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">
|
||||
|
||||
@ -116,6 +116,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 +157,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 +171,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
docs/source/img/tailwind.svg
Normal file
1
docs/source/img/tailwind.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.9 KiB |
@ -6,12 +6,10 @@ export default function(configFile) {
|
||||
}
|
||||
|
||||
return function(css, opts) {
|
||||
opts.messages = [
|
||||
{
|
||||
type: 'dependency',
|
||||
file: configFile,
|
||||
parent: css.source.input.file,
|
||||
},
|
||||
]
|
||||
opts.messages.push({
|
||||
type: 'dependency',
|
||||
file: configFile,
|
||||
parent: css.source.input.file,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user