# 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]
Alternatively, you can simply copy the default config file [from here](https://github.com/nothingworksinc/tailwindcss/blob/master/defaultConfig.js).
## 3. Add Tailwind to your CSS
Use the `@@tailwind` directive to inject Tailwind's `reset` 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/nothingworksinc/tailwindcss/blob/master/css/preflight.css
*/
@@tailwind reset;
/**
* Here you would import any custom component classes; stuff that you'd
* want loaded *before* the utilities so that the utilities can still
* override them.
*/
// @@import "my-components/foo";
// @@import "my-components/bar";
/**
* This injects all of Tailwind's utility classes, generated based on your
* config file.
*/
@@tailwind utilities;
/**
* Here you would add any custom utilities you need that don't come out of the box with Tailwind.
*/
// .bg-hero-image {
// background-image: url('/some/image/file.png');
// }
```
## 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 styles.css [-c ./your-tailwind-config.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'),
// ...
]
}
```
### 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'),
// ...
]))
// ...
.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('source/_assets/less/main.less', 'source/css')
.options({
postCss: [
tailwindcss('./path/to/your/tailwind-config.js'),
]
})
```