tailwindcss/docs/source/installation.blade.md

extends	title
_layouts.markdown	Installation

Installation

Quick start guide for installing and configuring Tailwind.

1. Install the dependency

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

# Using npm

npm install tailwindcss

# Using Yarn

yarn install tailwindcss

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

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:

/**
 * 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. Add Tailwind to your build process

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:

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'))
    ]
  });