tailwindcss/docs/source/docs/installation.blade.md

extends	title
_layouts.documentation	Installation

Installation

Quick start guide for installing and configuring Tailwind.

1. Install Tailwind via npm

Tailwind is available on npm and can be installed using npm or Yarn.

# Using npm

npm install tailwindcss --save-dev

# Using Yarn

yarn add tailwindcss --dev

2. Create a Tailwind config file

Tailwind is configured almost entirely in plain JavaScript. To do this you'll need to generate a Tailwind config file for your project. We recommend creating a tailwind.js file in your project's root. We've provided a CLI utility to do this easily:

./node_modules/.bin/tailwind init [filename]

Alternatively, you can simply copy the default config file from here.

3. Use Tailwind in your CSS

Use the @@tailwind directive to inject Tailwind's preflight and utilities styles into your CSS.

To avoid specificity issues, we highly recommend structuring your main stylesheet like this:

/**
 * 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/tailwindcss/tailwindcss/blob/master/css/preflight.css
 */
@@tailwind preflight;

/**
 * Here you would add any of your custom component classes; stuff that you'd
 * want loaded *before* the utilities so that the utilities could still
 * override them.
 *
 * Example:
 * 
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor:
 * 
 * @@import "components/buttons";
 * @@import "components/forms";
 */

/**
 * 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.
 *
 * Example :
 *
 * .bg-pattern-graph-paper { ... }
 * .skew-45 { ... }
 *
 * Or if using a preprocessor..
 * 
 * @@import "utilities/backgrond-patterns";
 * @@import "utilities/skew-transforms";
 */

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 build styles.css [-c ./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.

Webpack

Add tailwindcss as a plugin in your postcss.config.js file, passing the path to your config file:

var tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [
    // ...
    tailwindcss('./path/to/your/tailwind-config.js'),
    require('autoprefixer'),
    // ...
  ]
}

For a complete example, check out our webpack-starter template.

Gulp

Add tailwindcss to the list of plugins you pass to gulp-postcss, passing the path to your config file:

gulp.task('css', function () {
    var postcss = require('gulp-postcss');
    var tailwindcss = require('tailwindcss');

    return gulp.src('src/styles.css')
        // ...
        .pipe(postcss([
          // ...
          tailwindcss('./path/to/your/tailwind-config.js'),
          require('autoprefixer'),
          // ...
        ]))
        // ...
        .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:

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:

var tailwindcss = require('tailwindcss');

mix.less('source/_assets/less/main.less', 'source/css')
  .options({
    postCss: [
      tailwindcss('./path/to/your/tailwind-config.js'),
    ]
  })

Note for Sass users: Due to an unresolved issue with one of Mix's dependencies, to use Sass with Tailwind you'll need to disable processCssUrls:

var tailwindcss = require('tailwindcss');

mix.sass('resources/assets/sass/app.scss', 'public/css')
   .options({
      processCssUrls: false,
      postCss: [ tailwindcss('path/to/config.js') ],
   });

For more information on what this feature does and the implications of disabling it, see the Laravel Mix documentation.