diff --git a/docs/docs/08-guides.md b/docs/docs/08-guides.md index ca80a78d41..0bdd2895e2 100644 --- a/docs/docs/08-guides.md +++ b/docs/docs/08-guides.md @@ -106,9 +106,9 @@ You can add [Tailwind](https://tailwindcss.com) to any project via native CSS `@ @import 'tailwindcss/dist/utilities.css'; ``` -#### Using PostCSS +#### Using Tailwind with PostCSS -Tailwind also ships with first-class support for PostCSS. If you are using PostCSS in your project ([see above](#postcss)) then you can just add the Tailwind PostCSS plugin to your PostCSS config file to take advantage of the `@tailwind` keyword. +If you are using PostCSS in your project ([see above](#postcss)) then you can just add Tailwind as a plugin to your `postcss.config.js`: ```js // postcss.config.js @@ -123,6 +123,18 @@ module.exports = { }; ``` +Once you have added the Tailwind PostCSS plugin, you can replace your native CSS `dist` imports with Tailwind's more powerful `base`, `components`, and `utilities` imports: + +```diff +/* index.css */ +- @import 'tailwindcss/dist/base.css'; +- @import 'tailwindcss/dist/components.css'; +- @import 'tailwindcss/dist/utilities.css'; ++ @import 'tailwindcss/base'; ++ @import 'tailwindcss/components'; ++ @import 'tailwindcss/utilities'; +``` + Follow the official [Tailwind CSS Docs](https://tailwindcss.com/docs/installation/#using-tailwind-with-postcss) for more information. ### Sass