Skip to content

Commit afc4125

Browse files
committed
Merge branch 'master' into develop
2 parents 6eccfc1 + ca94872 commit afc4125

File tree

10 files changed

+130
-32
lines changed

10 files changed

+130
-32
lines changed

.github/CONTRIBUTING.md

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Contributing
2+
3+
Thanks for your interest in contributing to Tailwind CSS! Please take a moment to review this document **before submitting a pull request**.
4+
5+
## Pull requests
6+
7+
**Please ask first before starting work on any significant new features.**
8+
9+
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.
10+
11+
## Coding standards
12+
13+
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:
14+
15+
```sh
16+
npm run style
17+
```
18+
19+
To automatically fix any style violations in your code, you can run:
20+
21+
```sh
22+
npm run style --fix
23+
```
24+
25+
## Running tests
26+
27+
You can run the test suite using the following commands:
28+
29+
```sh
30+
npm test
31+
```
32+
33+
Please ensure that the tests are passing when submitting a pull request. If you're adding new features to Tailwind, please include tests.
34+
35+
## Building the documentation
36+
37+
Tailwind uses the [Jigsaw](http://jigsaw.tighten.co/) static site generator for its documentation. Here is how you can generate the documentation locally:
38+
39+
1. Go to your Tailwind folder
40+
41+
```sh
42+
cd tailwindcss
43+
```
44+
45+
2. Install JS dependencies
46+
47+
```sh
48+
npm install
49+
```
50+
51+
3. Transpile the source code
52+
53+
```sh
54+
npm run prepare
55+
```
56+
57+
4. Go to docs folder
58+
59+
```sh
60+
cd docs
61+
```
62+
63+
5. Install PHP dependencies for docs (requires Composer: https://getcomposer.org)
64+
65+
```sh
66+
composer install
67+
```
68+
69+
6. Install JS dependencies for docs
70+
71+
```sh
72+
npm install
73+
```
74+
75+
7. Run the build to generate the static site
76+
77+
```sh
78+
npm run dev
79+
```
80+
81+
8. View the static site at `/tailwind/docs/build_local`, or you can run the Jigsaw server:
82+
83+
```sh
84+
./vendor/bin/jigsaw serve
85+
```

README.md

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
1-
# Tailwind CSS
1+
<p align="center">
2+
<a href="https://tailwindcss.com/" target="_blank"><img width="200" src="https://tailwindcss.com/img/tailwind.svg"></a><br>
3+
A utility-first CSS framework for rapidly building custom user interfaces.
4+
</p>
25

3-
[ ![Codeship Status for tailwindcss/tailwindcss](https://app.codeship.com/projects/cdd4ad20-a319-0135-c87c-02251d502cd2/status?branch=master)](https://app.codeship.com/projects/254859)
6+
<p align="center">
7+
<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>
8+
<a href="https://www.npmjs.com/package/tailwindcss"><img src="https://img.shields.io/npm/dt/tailwindcss.svg" alt="Total Downloads"></a>
9+
<a href="https://github.com/tailwindcss/tailwindcss/releases"><img src="https://img.shields.io/npm/v/tailwindcss.svg" alt="Latest Release"></a>
10+
<a href="https://github.com/tailwindcss/tailwindcss/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss.svg" alt="License"></a>
11+
</p>
412

5-
A utility-first CSS framework for rapidly building custom user interfaces.
13+
------
614

715
## Documentation
816

9-
For full documentation, visit: https://tailwindcss.com/
17+
For full documentation, visit [tailwindcss.com](https://tailwindcss.com/).
18+
19+
## Contributing
20+
21+
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**.

docs/source/_layouts/documentation.blade.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,8 @@
158158
<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>
159159
<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>
160160
<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>
161-
<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>
162161
<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>
162+
<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>
163163
</ul>
164164
</div>
165165
</nav>

docs/source/docs/examples/alerts.blade.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,19 @@ title: "Alerts"
2222
### Traditional
2323

2424
@component('_partials.code-sample', ['lang' => 'html'])
25-
<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative">
25+
<div class="bg-red-lightest border border-red-light text-red-dark px-4 py-3 rounded relative" role="alert">
2626
<strong class="font-bold">Holy smokes!</strong>
2727
<span class="block sm:inline">Something seriously bad happened.</span>
2828
<span class="absolute pin-t pin-b pin-r px-4 py-3">
29-
<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>
29+
<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>
3030
</span>
3131
</div>
3232
@endcomponent
3333

3434
### Left Accent Border
3535

3636
@component('_partials.code-sample', ['lang' => 'html'])
37-
<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4">
37+
<div class="bg-orange-lightest border-l-4 border-orange text-orange-dark p-4" role="alert">
3838
<p class="font-bold">Be Warned</p>
3939
<p>Something not ideal might be happening.</p>
4040
</div>
@@ -43,7 +43,7 @@ title: "Alerts"
4343
### Titled
4444

4545
@component('_partials.code-sample', ['lang' => 'html'])
46-
<div>
46+
<div role="alert">
4747
<div class="bg-red text-white font-bold rounded rounded-t px-4 py-2">
4848
Danger
4949
</div>
@@ -56,7 +56,7 @@ title: "Alerts"
5656
### Solid
5757

5858
@component('_partials.code-sample', ['lang' => 'html'])
59-
<div class="flex items-center bg-blue text-white text-sm font-bold px-4 py-3">
59+
<div class="flex items-center bg-blue text-white text-sm font-bold px-4 py-3" role="alert">
6060
<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>
6161
<p>
6262
Something happened that you should know about.
@@ -67,7 +67,7 @@ title: "Alerts"
6767
### Top Accent Border
6868

6969
@component('_partials.code-sample', ['lang' => 'html'])
70-
<div class="bg-teal-lightest border-t-4 border-teal rounded rounded-b text-teal-darkest px-4 py-3 shadow-md">
70+
<div class="bg-teal-lightest border-t-4 border-teal rounded rounded-b text-teal-darkest px-4 py-3 shadow-md" role="alert">
7171
<div class="flex">
7272
<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>
7373
<div>
@@ -81,7 +81,7 @@ title: "Alerts"
8181
### Banner
8282

8383
@component('_partials.code-sample', ['lang' => 'html'])
84-
<div class="bg-blue-lightest border-t border-b border-blue text-blue-dark px-4 py-3">
84+
<div class="bg-blue-lightest border-t border-b border-blue text-blue-dark px-4 py-3" role="alert">
8585
<p class="font-bold">Informational message</p>
8686
<p class="text-sm">Some additional text to explain said message.</p>
8787
</div>

docs/source/docs/examples/cards.blade.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ title: "Cards"
2323

2424
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
2525
<div class="max-w-sm rounded overflow-hidden shadow-lg">
26-
<img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg">
26+
<img class="w-full" src="{{ $page->baseUrl }}/img/card-top.jpg" alt="Sunset in the mountains">
2727
<div class="px-6 py-4">
2828
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
2929
<p class="text-grey-darker text-base">
@@ -43,7 +43,7 @@ title: "Cards"
4343
@component('_partials.code-sample', ['class' => 'p-10 flex justify-center'])
4444
<div class="max-w-md flex">
4545
<div class="rounded rounded-l w-128 text-center overflow-hidden">
46-
<img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg">
46+
<img class="block h-64" src="{{ $page->baseUrl }}/img/card-left.jpg" alt="Woman holding a mug">
4747
</div>
4848
<div class="border-t border-r border-b border-grey-light rounded rounded-r p-4 flex flex-col justify-between">
4949
<div>
@@ -55,7 +55,7 @@ title: "Cards"
5555
<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>
5656
</div>
5757
<div class="flex items-center">
58-
<img class="w-10 h-10 rounded-full mr-4" src="https://pbs.twimg.com/profile_images/885868801232961537/b1F6H4KC_400x400.jpg">
58+
<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">
5959
<div class="text-sm">
6060
<p class="text-black leading-none">Jonathan Reinink</p>
6161
<p class="text-grey-dark">Aug 18</p>

docs/source/docs/examples/forms.blade.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -132,11 +132,11 @@ title: "Forms"
132132
<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">
133133
</div>
134134
<div class="md:w-1/2 px-3">
135-
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-select">
135+
<label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
136136
State
137137
</label>
138138
<div class="relative">
139-
<select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded">
139+
<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">
140140
<option>New Mexico</option>
141141
<option>Missouri</option>
142142
<option>Texas</option>
@@ -162,7 +162,7 @@ title: "Forms"
162162
@component('_partials.code-sample', ['class' => 'flex justify-center p-8'])
163163
<form class="w-full max-w-sm">
164164
<div class="flex items-center border-b border-b-2 border-teal py-2">
165-
<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">
165+
<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">
166166
<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">
167167
Sign Up
168168
</button>

docs/source/docs/examples/navigation.blade.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ title: "Navigation"
4848
</div>
4949
<div class="block lg:hidden">
5050
<button class="flex items-center px-3 py-2 border rounded text-teal-lighter border-teal-light hover:text-white hover:border-white">
51-
<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>
51+
<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>
5252
</button>
5353
</div>
5454
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">

docs/source/docs/installation.blade.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@ module.exports = {
116116
}
117117
```
118118

119+
For a complete example, check out our [webpack-starter](https://github.com/tailwindcss/webpack-starter) template.
120+
119121
#### Gulp
120122

121123
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
155157
```js
156158
var tailwindcss = require('tailwindcss');
157159

158-
mix.less('source/_assets/less/main.less', 'source/css')
160+
mix.less('resources/assets/less/app.less', 'public/css')
159161
.options({
160162
postCss: [
161163
tailwindcss('./path/to/your/tailwind-config.js'),
162164
]
163-
})
165+
});
164166
```
165167

166168
**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')
169171
var tailwindcss = require('tailwindcss');
170172

171173
mix.sass('resources/assets/sass/app.scss', 'public/css')
172-
.options({
173-
processCssUrls: false,
174-
postCss: [ tailwindcss('path/to/config.js') ],
175-
});
174+
.options({
175+
processCssUrls: false,
176+
postCss: [ tailwindcss('./path/to/your/tailwind-config.js') ],
177+
});
176178
```
177179

178180
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).

0 commit comments

Comments
 (0)