Installation
For most projects (and to take advantage of Tailwind’s customization features), you’ll want to install Tailwind via npm.
Use the 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";
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 .
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'),
// ...
]
}
For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS:
Use the npx tailwindcss help build
command to learn more about the various CLI options.
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: {
{
// ...
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({
postCss: [ tailwindcss('./path/to/your/tailwind.config.js') ],
})
For more information on what this feature does and the implications of disabling it, .
Webpack Encore
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.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();
};
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 like
@apply
,@variants
, etc. - You can’t enable features like
- You can’t install third-party plugins
- You can’t tree-shake unused styles
To get the most out of Tailwind, you really should .
To pull in Tailwind for quick demos or just giving the framework a spin, grab the latest default configuration build via CDN:
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.