安装
1 Install Tailwind via npm
对大多数项目(为了发挥 Tailwind 的可定制功能),你需要通过 npm 来安装 Tailwind。
# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcss
2 将 Tailwind 添加到你的 CSS 代码中
通过 @tailwind
指令将 Tailwind 的 base
、components
和 utilities
样式添加到你的 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 Create 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 = {
theme: {},
variants: {},
plugins: [],
}
Learn more about configuring Tailwind in the configuration documentation.
4 Process 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: {
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
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 (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.