diff --git a/__tests__/fixtures/tailwind.css b/__tests__/fixtures/tailwind.css index b1d1e9d56..3f6b21548 100644 --- a/__tests__/fixtures/tailwind.css +++ b/__tests__/fixtures/tailwind.css @@ -555,7 +555,6 @@ input::placeholder { button, [role=button] { - font-family: inherit; cursor: pointer; } diff --git a/css/preflight.css b/css/preflight.css index 4be97e1db..8a98969ac 100644 --- a/css/preflight.css +++ b/css/preflight.css @@ -95,6 +95,5 @@ input::placeholder { } button, [role=button] { - font-family: inherit; cursor: pointer; } diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less index 35884deb2..e6f5a64ce 100644 --- a/docs/source/_assets/less/markdown.less +++ b/docs/source/_assets/less/markdown.less @@ -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; diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index 732ae5d2a..007704d23 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -87,7 +87,6 @@

Styles

-## 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.
# Using npm
-
npm install tailwindcss
+
npm install tailwindcss --save-dev
# Using Yarn
-
yarn install tailwindcss
+
yarn add tailwindcss --dev
## 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: + +
+
./node_modules/.bin/tailwind styles.css [-c ./your-tailwind-config.js] [-o ./output.css]
+
+ +### 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: - -
-
./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](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'), ] - }); + }) ```