Installation

Quick start guide for installing and configuring Tailwind CSS.

1Install 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
# Using Yarn
yarn add tailwindcss

2Add 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";

3Create your Tailwind config file (optional)

If you’d like to customize your Tailwind installation, you can generate a config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:

npx tailwindcss init

This will create a minimal tailwind.config.js file at the root of your project:

// tailwind.config.js
module.exports = {
  future: {},
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

You can optionally include the -p flag to generate a basic postcss.config.js file at the same time:

npx tailwindcss init -p

Learn more about configuring Tailwind in the configuration documentation.

4Process your CSS with Tailwind

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.

Using Tailwind CLI

For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS:

npx tailwindcss build styles.css -o output.css

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

Build Tool Examples

We’ve included some basic examples of setting up Tailwind with common build tools below, but also look at our setup-examples repository for even more examples that you can even clone and play with locally.

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: {
              postcssOptions: {
                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 that 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 plugins
• You can’t tree-shake unused styles

To 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 (46.2kB compressed, 1967.4kB 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.

Release Notes →