Installation

Quick start guide for installing and configuring Tailwind CSS.

1 Install Tailwind via npm

For most projects (and to take advantage of Tailwind’s customization features), you’ll want to install Tailwind via npm.

# Using npm
npm install tailwindcss --save-dev
# Using Yarn
yarn add tailwindcss --dev

2 Add Tailwind to your CSS

Use the @tailwind directive to inject Tailwind’s base, components, and utilities styles into your CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind will swap these directives out at build time with all of its generated CSS.

If you’re using postcss-import (or a tool that uses it under the hood, such as Webpacker for Rails), use our imports instead of the @tailwind directive to avoid issues when importing any of your own additional files:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

3 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:

npx tailwind build styles.css -o output.css

Use the npx tailwind help build command to learn more about the various CLI options.

Using Tailwind with PostCSS

For most projects, you’ll want to add Tailwind as a PostCSS plugin in your build chain.

Generally this means adding Tailwind as a plugin in your postcss.config.js file:

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

We’ve included more 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:

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

…or include it directly in your postcss-loader configuration in your webpack.config.js file:

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      use: [
        // ...
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [
              require('tailwindcss'),
              require('autoprefixer'),
            ],
          },
        },
      ],
    ],
  }
}

Gulp

Add tailwindcss to the list of plugins you pass to gulp-postcss:

gulp.task('css', function () {
  const postcss = require('gulp-postcss')
  return gulp.src('src/styles.css')
    // ...
    .pipe(postcss([
      // ...
      require('tailwindcss'),
      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 and include tailwindcss as a plugin:

mix.postCss('resources/css/main.css', 'public/css', [
  require('tailwindcss'),
])

If you’re using a preprocessor, use the options method to add tailwindcss as a PostCSS plugin:

const tailwindcss = require('tailwindcss')
mix.less('resources/less/app.less', 'public/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:

const tailwindcss = require('tailwindcss')
mix.sass('resources/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [ tailwindcss('./path/to/your/tailwind.config.js') ],
  })

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

Webpack Encore

Create a postcss.config.js file, add tailwindcss as a plugin and pass the path to your config file:

module.exports = {
  plugins: [
    require('tailwindcss'),
  ]
}

Within webpack.config.js, create a style entry and enable the PostCSS loader.

const Encore = require('@symfony/webpack-encore')
Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addStyleEntry('app', './css/app.css')
  .enablePostCssLoader()
module.exports = Encore.getWebpackConfig()

You can also pass options into the PostCSS loader by passing a callback, as per the Encore PostCSS docs:

Encore.enablePostCssLoader(function(options) {
  options.config = {
    path: 'config/postcss.config.js'
  }
})

Note for Sass users: Due to an unresolved issue with one of Encore’s dependencies, to use Sass with Tailwind you’ll need to disable resolveUrlLoader:

Encore.enableSassLoader(function (options) {}, {
  resolveUrlLoader: false
})

Brunch

Add tailwindcss to the list of processors you pass to postcss-brunch:

exports.config = {
  // ..
  plugins: {
    // ...
    postcss: {
      processors: [
        require('tailwindcss'),
      ]
    }
    // ...
  }
}

Ember.js

Add tailwindcss to the list of plugins you pass to ember-cli-postcss:

// ember-cli-build.js 
'use strict';
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          require('tailwindcss')
        ]
      }
    }
  });
  return app.toTree();
};

Using Tailwind via CDN

Before using the CDN build please note, many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process.

• You can’t customize Tailwind’s default theme
• You can’t use any directives like @apply, @variants, etc.
• You can’t enable features like group-hover
• You can’t install third-party pluginsTo get the most out of Tailwind, you really should install it via npm.

To pull in Tailwind for quick demos or just giving the framework a spin, grab the latest default configuration build via CDN:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Note that while the CDN build is large (27kb compressed, 348kb raw), it’s not representative of the sizes you see when including Tailwind as part of your build process.

Sites that follow our best practices are almost always under 10kb compressed. For example, Firefox Send is built with Tailwind and their CSS is under 4kb compressed and minified.