diff --git a/README.md b/README.md index 63be2d078..c18091a38 100644 --- a/README.md +++ b/README.md @@ -14,27 +14,13 @@ A utility-first CSS framework for rapid UI development. yarn add git+ssh://git@github.com:nothingworksinc/tailwindcss.git#master ``` -2. Create a Tailwind config file for your project by copying the default config file from here: +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. 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')) - ] - }); - ``` - -4. Create a CSS (or Less, Sass, Stylus, whatever) file as your main stylesheet, structured like this: +3. Create a CSS (or Less, Sass, Stylus, whatever) file as your main stylesheet, structured like this: ```less /** @@ -68,6 +54,28 @@ A utility-first CSS framework for rapid UI development. } ``` +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: @@ -76,26 +84,40 @@ https://github.com/nothingworksinc/tailwindcss/blob/master/dist/tailwind.css ## Additional Features -### Classes as Mixins +### 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-light; + @apply .bg-blue; + @apply .px-4; + @apply .py-2; + @apply .text-light; +} +.btn-primary:hover { + @apply .bg-blue-dark; +} - &: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 component purely out of existing utilities. If you need reference any of your Tailwind config values directly, you can do so with the `tailwind(...)` helper function: +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 { @@ -110,9 +132,9 @@ You can generate responsive versions of your own utilities by wrapping their def ```css @responsive { - .bg-gradient-brand { - background-image: linear-gradient(blue, green); - } + .bg-gradient-brand { + background-image: linear-gradient(blue, green); + } } ``` @@ -120,27 +142,27 @@ This will generate these classes (assuming you haven't changed the default break ```css .bg-gradient-brand { - background-image: linear-gradient(blue, green); + background-image: linear-gradient(blue, green); } @media (min-width: 576px) { - .sm\:bg-gradient-brand { - background-image: linear-gradient(blue, green); - } + .sm\:bg-gradient-brand { + background-image: linear-gradient(blue, green); + } } @media (min-width: 768px) { - .md\:bg-gradient-brand { - background-image: linear-gradient(blue, green); - } + .md\:bg-gradient-brand { + background-image: linear-gradient(blue, green); + } } @media (min-width: 992px) { - .lg\:bg-gradient-brand { - background-image: linear-gradient(blue, green); - } + .lg\:bg-gradient-brand { + background-image: linear-gradient(blue, green); + } } @media (min-width: 1200px) { - .xl\:bg-gradient-brand { - background-image: linear-gradient(blue, green); - } + .xl\:bg-gradient-brand { + background-image: linear-gradient(blue, green); + } } ``` @@ -152,7 +174,7 @@ Instead of duplicating the values like this: ```css @media (min-width: 576px) { - /* ... */ + /* ... */ } ``` @@ -160,6 +182,6 @@ Instead of duplicating the values like this: ```css @screen sm { - /* ... */ + /* ... */ } ```