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

Or if you’d like to pull in the base styles separate from the utility classes:

<!-- Any of your own CSS would go here -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@0.7.4/dist/utilities.min.css" rel="stylesheet">

NPM

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

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

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:

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
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/preflight";
 */
@tailwind preflight;
/**
 * This injects any component classes registered by plugins.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/components";
 */
@tailwind components;
/**
 * 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
 *
 * Example:
 *
 * .btn { ... }
 * .form-input { ... }
 *
 * Or if using a preprocessor or `postcss-import`:
 *
 * @import "components/buttons";
 */
/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 * If using `postcss-import`, use this import instead:
 *
 * @import "tailwindcss/utilities";
 */
@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 or `postcss-import`:
 *
 * @import "utilities/background-patterns";
 * @import "utilities/skew-transforms";
 */

Using Tailwind CLI

For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your 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.

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 .

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

Gulp

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

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');
  tailwindcss('./path/to/your/tailwind.js'),
]);

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

var tailwindcss = require('tailwindcss');
mix.less('resources/less/app.less', 'public/css')
  .options({
    postCss: [
      tailwindcss('./path/to/your/tailwind.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/sass/app.scss', 'public/css')
  .options({
    processCssUrls: false,
    postCss: [ tailwindcss('./path/to/your/tailwind.js') ],
  });

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

Webpack Encore

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

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

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

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

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

Brunch

Add to the list of processors you pass to , passing the path to your config file: