# Using npm
npm install tailwindcss --save-dev
# Using Yarn
yarn add tailwindcss --dev
### 2. Create a Tailwind config file
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:
./node_modules/.bin/tailwind init [filename]
### 3. Use Tailwind in your CSS
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:
```less
/**
* 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`, you should import this line from it's own file:
*
* @@import "./tailwind-preflight.css";
*
* See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
*/
@@tailwind preflight;
/**
* 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
* override them.
*
* Example:
*
* .btn { ... }
* .form-input { ... }
*
* Or if using a preprocessor or `postcss-import`:
*
* @@import "components/buttons";
* @@import "components/forms";
*/
/**
* This injects all of Tailwind's utility classes, generated based on your
* config file.
*
* If using `postcss-import`, you should import this line from it's own file:
*
* @@import "./tailwind-utilities.css";
*
* See: https://github.com/tailwindcss/tailwindcss/issues/53#issuecomment-341413622
*/
@@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";
*/
```
### 4. 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:
./node_modules/.bin/tailwind build styles.css [-c ./tailwind.js] [-o ./output.css]
#### 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 [PostCSS documentation](https://github.com/postcss/postcss#usage).
#### Webpack
Add `tailwindcss` as a plugin in your `postcss.config.js` file, passing the path to your config file:
```js
var tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
// ...
tailwindcss('./path/to/your/tailwind-config.js'),
require('autoprefixer'),
// ...
]
}
```
For a complete example, check out our [webpack-starter](https://github.com/tailwindcss/webpack-starter) template.
#### Gulp
Add `tailwindcss` to the list of plugins you pass to [gulp-postcss](https://github.com/postcss/gulp-postcss), passing the path to your config file:
```js
gulp.task('css', function () {
var postcss = require('gulp-postcss');
var tailwindcss = require('tailwindcss');
return gulp.src('src/styles.css')
// ...
.pipe(postcss([
// ...
tailwindcss('./path/to/your/tailwind-config.js'),
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. Include `tailwindcss` as a plugin and pass the path to your config file:
```js
var tailwindcss = require('tailwindcss');
mix.postCss('resources/assets/css/main.css', 'public/css', [
tailwindcss('./path/to/your/tailwind-config.js'),
]);
```
If you're using a preprocessor, use the `options` method to add `tailwindcss` as a PostCSS plugin:
```js
var tailwindcss = require('tailwindcss');
mix.less('resources/assets/less/app.less', 'public/css')
.options({
postCss: [
tailwindcss('./path/to/your/tailwind-config.js'),
]
});
```
**Note for Sass users:** Due to [an unresolved issue](https://github.com/bholloway/resolve-url-loader/issues/28) with one of Mix's dependencies, to use Sass with Tailwind you'll need to disable `processCssUrls`:
```js
var tailwindcss = require('tailwindcss');
mix.sass('resources/assets/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](https://github.com/JeffreyWay/laravel-mix/blob/master/docs/css-preprocessors.md#css-url-rewriting).