-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
63eda62
commit 0251107
Showing
1 changed file
with
4 additions
and
184 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,187 +1,7 @@ | ||
| # TailwindCSS | ||
| # Tailwind CSS | ||
|
|
||
| A utility-first CSS framework for rapid UI development. | ||
| A utility-first CSS framework for rapidly building custom user interfaces. | ||
|
|
||
| ## Getting Started | ||
| ## Documentation | ||
|
|
||
| 1. Add the library to your project as a Git repo dependency: | ||
|
|
||
| ```sh | ||
| # Using npm | ||
| npm install git+ssh://git@github.com:nothingworksinc/tailwindcss.git#master | ||
|
|
||
| # Using Yarn | ||
| yarn add git+ssh://git@github.com:nothingworksinc/tailwindcss.git#master | ||
| ``` | ||
|
|
||
| 2. Create a Tailwind config file for your project by saving a copy of the default config file somewhere sensible, like `tailwind.js` in your project's root. | ||
| You can copy the default config file from here: | ||
| https://github.com/nothingworksinc/tailwindcss/blob/master/src/defaultConfig.js | ||
| 3. Create a CSS (or Less, Sass, Stylus, whatever) file as your main stylesheet, structured like this: | ||
| ```less | ||
| /** | ||
| * This injects Tailwind's base styles, which is a combination of | ||
| * Normalize.css and some additional base styles. | ||
| * | ||
| * You can see the styles here: | ||
| * https://github.com/nothingworksinc/tailwindcss/blob/master/css/preflight.css | ||
| */ | ||
| @tailwind preflight; | ||
|
|
||
| /** | ||
| * 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"; | ||
| /** | ||
| * This injects all of Tailwind's utility classes, generated based on your | ||
| * config file. | ||
| */ | ||
| @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'); | ||
| } | ||
| ``` | ||
| 4. For simple projects or just taking Tailwind for a spin, use the `tailwind` CLI tool to process your CSS: | ||
| ```sh | ||
| ./node_modules/.bin/tailwind styles.css [-c ./custom-config.js] [-o ./output.css] | ||
| ``` | ||
| 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: | ||
| ```js | ||
| const mix = require('laravel-mix'); | ||
| const tailwind = require('tailwindcss'); | ||
| mix.less('resources/assets/less/app.less', 'public/css') | ||
| .options({ | ||
| postCss: [ | ||
| tailwind(require('./path/to/your/tailwind/config.js')) | ||
| ] | ||
| }); | ||
| ``` | ||
| ## Style Reference | ||
| Until the real documentation is ready, you can reference this file to see which classes exist and what they do: | ||
| https://github.com/nothingworksinc/tailwindcss/blob/master/dist/tailwind.css | ||
| ## Additional Features | ||
| ### Using utilities as mixins | ||
| To use existing utility classes as mixins in your custom component classes, use the `@apply` custom at-rule: | ||
| ```less | ||
| // Input | ||
| .btn-primary { | ||
| @apply .bg-blue; | ||
| @apply .px-4; | ||
| @apply .py-2; | ||
| @apply .text-white; | ||
| } | ||
| .btn-primary:hover { | ||
| @apply .bg-blue-dark; | ||
| } | ||
| // Output | ||
| .btn-primary { | ||
| background-color: #4aa2ea; | ||
| padding-left: 1rem; | ||
| padding-right: 1rem; | ||
| padding-top: .5rem; | ||
| padding-bottom: .5rem; | ||
| color: #fff; | ||
| } | ||
| .btn-primary:hover { | ||
| background-color: #3687c8; | ||
| } | ||
| ``` | ||
| ### Referencing config values in your CSS | ||
| It's not always possible to build components purely out of existing utilities. If you need to reference any of your Tailwind config values directly, you can do so with the `tailwind(...)` helper function: | ||
|
|
||
| ```less | ||
| .markdown pre { | ||
| border: 1px solid tailwind('borders.defaults.color'); | ||
| border-left: 4px solid tailwind('borders.colors.dark'); | ||
| } | ||
| ``` | ||
|
|
||
| ### Creating responsive versions of your own utilities | ||
|
|
||
| You can generate responsive versions of your own utilities by wrapping their definitions in the `@responsive` at-rule: | ||
|
|
||
| ```css | ||
| @responsive { | ||
| .bg-gradient-brand { | ||
| background-image: linear-gradient(blue, green); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| This will generate these classes (assuming you haven't changed the default breakpoints): | ||
| ```css | ||
| .bg-gradient-brand { | ||
| background-image: linear-gradient(blue, green); | ||
| } | ||
| @media (min-width: 576px) { | ||
| .sm\:bg-gradient-brand { | ||
| background-image: linear-gradient(blue, green); | ||
| } | ||
| } | ||
| @media (min-width: 768px) { | ||
| .md\:bg-gradient-brand { | ||
| background-image: linear-gradient(blue, green); | ||
| } | ||
| } | ||
| @media (min-width: 992px) { | ||
| .lg\:bg-gradient-brand { | ||
| background-image: linear-gradient(blue, green); | ||
| } | ||
| } | ||
| @media (min-width: 1200px) { | ||
| .xl\:bg-gradient-brand { | ||
| background-image: linear-gradient(blue, green); | ||
| } | ||
| } | ||
| ``` | ||
| ### Media query shorthand | ||
| Say you have a `sm` breakpoint at 576px, and you need to write some custom CSS that references this breakpoint. | ||
| Instead of duplicating the values like this: | ||
| ```css | ||
| @media (min-width: 576px) { | ||
| /* ... */ | ||
| } | ||
| ``` | ||
| ...you can use the `@screen` at-rule and pass the breakpoint name: | ||
| ```css | ||
| @screen sm { | ||
| /* ... */ | ||
| } | ||
| ``` | ||
| For full documentation, visit: https://tailwindcss.com/ |