wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Merge branch 'master' of github.com:nothingworksinc/tailwindcss

Browse source
This commit is contained in:
Jonathan Reinink 2017-10-30 13:25:17 -04:00
commit f36559fea1
7 changed files with 161 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

1
__tests__/fixtures/tailwind.css
View file

@ -555,7 +555,6 @@ input::placeholder {
button,
[role=button] {
font-family: inherit;
cursor: pointer;
}

1
css/preflight.css
View file

@ -95,6 +95,5 @@ input::placeholder {
}
button, [role=button] {
font-family: inherit;
cursor: pointer;
}

9
docs/source/_assets/less/markdown.less
View file

@ -79,6 +79,15 @@
@apply .text-lg;
}
> h4, h4& {
@apply .mt-8;
@apply .mb-0;
@apply .text-slate-darker;
@apply .leading-none;
@apply .font-semibold;
@apply .text-base;
}
> p, p&, > blockquote > p {
@apply .text-slate-dark;
@apply .mt-4;

1
docs/source/_layouts/master.blade.php
View file

@ -87,7 +87,6 @@
<div class="mt-8">
<p class="mb-4 text-slate-light uppercase tracking-wide font-bold text-xs">Styles</p>
<ul class="mb-8">
<li class="mb-3"><a href="{{ $page->baseUrl }}/docs/base" class="{{ $page->active('/docs/base') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Base</a></li>
<li class="mb-3">
<a href="{{ $page->baseUrl }}/docs/background-color" class="block mb-2 {{ $page->active('/docs/background-') ? 'text-slate-darker font-bold' : 'text-slate-dark' }}">Backgrounds</a>
<ul class="pl-4 {{ $page->active('/docs/background-') ? 'block' : 'hidden' }}">

14
docs/source/docs/base.blade.md
View file

@ -1,14 +0,0 @@
---
extends: _layouts.markdown
title: "Base"
---
# Base
<div class="subnav">
<a class="subnav-link" href="#usage">Usage</a>
<a class="subnav-link" href="#responsive">Responsive</a>
<a class="subnav-link" href="#customizing">Customizing</a>
</div>
Document our base styles.

105
docs/source/docs/functions-and-directives.blade.md
View file

@ -5,11 +5,11 @@ title: "Functions &amp; Directives"
# Functions & Directives
Tailwind exposes a few CSS functions and directives that can be used in your actual CSS files.
Tailwind exposes a few custom CSS functions and directives that can be used in your actual CSS files.
## `@tailwind`
## `@@tailwind`
Use the `@tailwind` directive to insert the Tailwind reset styles and utilities into your CSS file. Here is a full example of how you might do this:
Use the `@@tailwind` directive to insert Tailwind's `reset` and `utilities` styles into your CSS. Here is a full example of how you might do this:
```less
/**
@ -19,36 +19,59 @@ Use the `@tailwind` directive to insert the Tailwind reset styles and utilities
* You can see the styles here:
* https://github.com/nothingworksinc/tailwindcss/blob/master/css/preflight.css
*/
@tailwind reset;
/**
* Here you would import any custom component classes; stuff that you'd
* want loaded *before* the utilities so that the utilities can still
* override them.
*/
@import "my-components/foo";
@import "my-components/bar";
@@tailwind reset;
/**
* This injects all of Tailwind's utility classes, generated based on your
* config file.
*/
@tailwind utilities;
@@tailwind utilities;
```
/**
* Here you would add any custom utilities you need that don't come out of the box with Tailwind.
*/
.bg-hero-image {
background-image: url('/some/image/file.png');
## `@@apply`
Use `@@apply` to mixin the contents of existing classes into your custom CSS.
This is extremely useful when you find a common utility pattern in your HTML that you'd like to extract to a new component.
```less
.btn {
@@apply .font-bold .py-2 .px-4 .rounded;
}
.btn-blue {
@@apply .bg-blue .text-white;
}
.btn-blue:hover {
@@apply .bg-blue-dark;
}
```
## `@responsive`
You can generate responsive versions of your own utilities by wrapping their definitions in the `@responsive` directive:
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:
```less
@responsive {
// Won't work:
.btn {
@@apply .md:inline-block;
@@apply .hover:bg-blue;
}
// Do this instead:
.btn {
&:hover {
@@apply .bg-blue;
}
@@screen md {
@@apply .inline-block;
}
}
```
## `@@responsive`
You can generate responsive versions of your own classes by wrapping their definitions in the `@responsive` directive:
```less
@@responsive {
.bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
@ -61,51 +84,67 @@ This will generate these classes (assuming you haven't changed the default break
.bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
@media (min-width: 576px) {
// ...
@@media (min-width: 576px) {
.sm\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
// ...
}
@media (min-width: 768px) {
@@media (min-width: 768px) {
.md\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
// ...
}
@media (min-width: 992px) {
@@media (min-width: 992px) {
.lg\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
// ...
}
@media (min-width: 1200px) {
@@media (min-width: 1200px) {
.xl\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
// ...
}
```
## `@screen`
The responsive versions will be added to Tailwind's existing media queries **at the end of your stylesheet.** This makes sure that classes with a responsive prefix always defeat non-responsive classes that are targeting the same CSS property.
Say you have a `sm` breakpoint at `576px`, and you need to write some custom CSS that references this breakpoint.
## `@@screen`
Instead of duplicating the values like this:
The `@@screen` directive allows you to create media queries that reference your breakpoints by name instead of duplicating their values in your own CSS.
For example, say you have a `sm` breakpoint at `576px` and you need to write some custom CSS that references this breakpoint.
Instead of writing a raw media query that duplicates that value like this:
```less
@media (min-width: 576px) {
{{ '@media (min-width: 576px) {' }}
/* ... */
}
```
...you can use the `@screen` directive and pass the breakpoint name:
...you can use the `@@screen` directive and reference the breakpoint by name:
```less
@screen sm {
@@screen sm {
/* ... */
}
```
## `config()`
With all your variables defined in your JavaScript-based Tailwind config file, you may be wondering how you access those values in your custom CSS. This can be done using the `config()` helper function. Here is an example:
While it's recommended to use the `@@apply` directive to compose custom CSS out of existing utility classes whenever possible, some times you need direct access to your Tailwind config values.
Use the `config()` function to access your Tailwind config values using dot notation:
```less
.error {

103
docs/source/docs/installation.blade.md
View file

@ -9,15 +9,15 @@ title: "Installation"
Quick start guide for installing and configuring Tailwind.
</div>
## 1. Install the dependency
## 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="text-smoke-darker"># Using npm</div>
<div class="text-purple-dark">npm install <span class="text-blue-dark">tailwindcss</span></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 install <span class="text-blue-dark">tailwindcss</span></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
@ -32,7 +32,9 @@ Alternatively, you can simply copy the default config file [from here](https://g
## 3. Add Tailwind to your CSS
Next, you need to add Tailwind to your main stylesheet. This can be plain CSS, Less, Sass, Stylus, or something else. There order here is important, so please follow this structure:
Use the `@@tailwind` directive to inject Tailwind's `reset` and `utilities` styles into your CSS.
To avoid specificity issues, we highly recommend structuring your main stylesheet like this:
```less
/**
@ -42,48 +44,103 @@ Next, you need to add Tailwind to your main stylesheet. This can be plain CSS, L
* You can see the styles here:
* https://github.com/nothingworksinc/tailwindcss/blob/master/css/preflight.css
*/
@tailwind reset;
@@tailwind reset;
/**
* Here you would import any custom component classes; stuff that you'd
* want loaded *before* the utilities so that the utilities can still
* override them.
*/
@import "my-components/foo";
@import "my-components/bar";
// @@import "my-components/foo";
// @@import "my-components/bar";
/**
* This injects all of Tailwind's utility classes, generated based on your
* config file.
*/
@tailwind utilities;
@@tailwind utilities;
/**
* Here you would add any custom utilities you need that don't come out of the box with Tailwind.
*/
.bg-hero-image {
background-image: url('/some/image/file.png');
// .bg-hero-image {
// background-image: url('/some/image/file.png');
// }
```
## 4. Process your CSS with Tailwind
### Using Tailwind CLI
For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS:
<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">styles.css</span> <span class="text-smoke-darker">[-c ./your-tailwind-config.js] [-o ./output.css]</span></div>
</div>
### Using Tailwind with PostCSS
For most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain.
We've included the Tailwind-specific instructions for a few popular tools below, but for instructions on getting started with PostCSS in general, see the [PostCSS documentation](https://github.com/postcss/postcss#usage).
#### Webpack
Add `tailwindcss` as a plugin in your `postcss.config.js` file, passing the path to your config file:
```js
var tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
// ...
tailwindcss('./path/to/your/tailwind-config.js'),
// ...
]
}
```
## 4. Add Tailwind to your build process
### Gulp
Finally, you'll need to add Tailwind to your build process. Fair warning: this can be the trickiest step. For simple projects you can use the Tailwind CLI tool to generate your CSS:
<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">styles.css</span> <span class="text-smoke-darker">[-c ./custom-config.js] [-o ./output.css]</span></div>
</div>
For most projects, you'll want to add Tailwind as a PostCSS plugin in your build chain, passing your config object as a parameter. Here's an example using [Laravel Mix](https://laravel.com/docs/5.5/mix):
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:
```js
const mix = require('laravel-mix');
const tailwind = require('tailwindcss');
gulp.task('css', function () {
var postcss = require('gulp-postcss');
var tailwindcss = require('tailwindcss');
mix.less('resources/assets/less/app.less', 'public/css')
return gulp.src('src/styles.css')
// ...
.pipe(postcss([
// ...
tailwindcss('./path/to/your/tailwind-config.js'),
// ...
]))
// ...
.pipe(gulp.dest('build/'));
});
```
#### Laravel Mix
If you're writing your project in plain CSS, use Mix's `postCss` method to process your CSS. Include `tailwindcss` as a plugin and pass the path to your config file:
```js
var tailwindcss = require('tailwindcss');
mix.postCss('resources/assets/css/main.css', 'public/css', [
tailwindcss('./path/to/your/tailwind-config.js'),
]);
```
If you're using a preprocessor, use the `options` method to add `tailwindcss` as a PostCSS plugin:
```js
var tailwindcss = require('tailwindcss');
mix.less('source/_assets/less/main.less', 'source/css')
.options({
postCss: [
tailwind(require('./path/to/your/tailwind/config.js'))
tailwindcss('./path/to/your/tailwind-config.js'),
]
});
})
```