tailwindcss/docs/source/installation.blade.md

extends	title
_layouts.markdown	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. Add Tailwind to your CSS

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:

/**
 * 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 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";

/**
 * 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. 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.

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'),
    // ...
  ]
}

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'),
          // ...
        ]))
        // ...
        .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'),
    ]
  })