chore(docs): Add documentation for tailwindcss support (#17747)

* Added documentation for tailwindcss support Additionally I fixed some highlight and intendation mistakes * Fixed code highlighting Inside the code sample was SCSS code instead of Sass. So, I changed the file extenstion into `scss`. * chore: format * consistent code formatting * removed tailwindcss instructions * added sass implementation of tailwind css * consistent use of tailwindcss and Tailwind CSS * imcorporate requested changes Co-authored-by: GatsbyJS Bot <[email protected]> Co-authored-by: Lennart <[email protected]>
gatsbyjs · Nov 13, 2019 · 4db2ff1 · 4db2ff1
1 parent fd17312
commit 4db2ff1
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 30 deletions.
diff --git a/docs/docs/tailwind-css.md b/docs/docs/tailwind-css.md
@@ -6,12 +6,13 @@ Tailwind is a utility-first CSS framework for rapidly building custom user inter
 
 ## Overview
 
-There are two ways you can use Tailwind with Gatsby:
+There are three ways you can use Tailwind with Gatsby:
 
 1. Standard: Use PostCSS to generate Tailwind classes, then you can apply those classes using `className`.
 2. CSS-in-JS: Integrate Tailwind classes into Styled Components.
+3. SCSS: Use [gatsby-plugin-sass](/packages/gatsby-plugin-sass) to support Tailwind classes in your SCSS files.
 
-You have to install and configure Tailwind for both of these methods, so this guide will walk through that step first, then you can follow the instructions for either PostCSS or CSS-in-JS.
+You have to install and configure Tailwind for all of these methods, so this guide will walk through that step first, then you can follow the instructions for PostCSS, CSS-in-JS or SCSS.
 
 ## Installing and configuring Tailwind
 
@@ -35,7 +36,7 @@ npx tailwind init
 
 ### Option #1: PostCSS
 
-1.  Install the Gatsby PostCSS plugin [**gatsby-plugin-postcss**](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-postcss).
+1.  Install the Gatsby PostCSS plugin [**gatsby-plugin-postcss**](/packages/gatsby-plugin-postcss).
 
 ```shell
 npm install --save gatsby-plugin-postcss
@@ -69,7 +70,7 @@ These steps assume you have a CSS-in-JS library already installed, and the examp
 
 1. Install Tailwind Babel Macro
 
-**Note**: `tailwind.macro` isn't currently compatible with Tailwind 1.0.0+. However, a compatible beta is available at `tailwind.macro@next`. Feel free to either use the beta or revert to TailwindCSS 0.7.4.
+**Note**: `tailwind.macro` isn't currently compatible with Tailwind 1.0.0+. However, a compatible beta is available at `tailwind.macro@next`. Feel free to either use the beta or revert to Tailwind 0.7.4.
 
 **Option 1**: Install `tailwind.macro@next` and use Tailwind 1.0.0+
 
@@ -105,6 +106,33 @@ const Button = tw.button`
 `
 ```
 
+### Option #3: SCSS
+
+1. Install the Gatsby SCSS plugin [**gatsby-plugin-sass**](/packages/gatsby-plugin-sass) and `node-sass`.
+
+```shell
+npm install --save node-sass gatsby-plugin-sass
+```
+
+2. To be able to use Tailwind classes in your SCSS files, add the `tailwindcss` package into the `postCSSPlugins` parameter in your `gatsby-config.js`.
+
+```javascript:title=gatsby-config.js
+plugins: [
+  {
+    resolve: `gatsby-plugin-sass`,
+    options: {
+      postCssPlugins: [
+        require("tailwindcss"),
+        require("./tailwind.config.js"), // Optional: Load custom Tailwind CSS configuration
+      ],
+    },
+  },
+],
+```
+
+**Note:** Optionally you can add a corresponding configuration file (by default it will be `tailwind.config.js`).
+If you are adding a custom configuration, you will need to load it after `tailwindcss`.
+
 ## Other resources
 
 - [Introduction to PostCSS](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/)

diff --git a/packages/gatsby-plugin-sass/README.md b/packages/gatsby-plugin-sass/README.md
@@ -10,13 +10,13 @@ Provides drop-in support for SASS/SCSS stylesheets
 
 1. Include the plugin in your `gatsby-config.js` file.
 
-```javascript:title="gatsby-config.js"
+```javascript:title=gatsby-config.js
 plugins: [`gatsby-plugin-sass`]
 ```
 
 2. Write your stylesheets in Sass/SCSS and require or import them as normal.
 
-```css:title="src/index.sass"
+```scss:title=src/index.scss
 html {
   background-color: rebeccapurple;
   p {
@@ -25,17 +25,16 @@ html {
 }
 ```
 
-```javascript
-import("./src/index.sass")
+```javascript:title=gatsby-browser.js
+import("./src/index.scss")
 ```
 
 ## Other options
 
 If you need to pass options to Sass use the plugins options, see [node-sass](https://github.com/sass/node-sass)/[dart-sass](https://github.com/sass/dart-sass) docs
 for all available options.
 
-```javascript
-// in gatsby-config.js
+```javascript:title=gatsby-config.js
 plugins: [
   {
     resolve: `gatsby-plugin-sass`,
@@ -49,8 +48,7 @@ plugins: [
 
 If you need to override the default options passed into [`css-loader`](https://github.com/webpack-contrib/css-loader):
 
-```javascript
-// in gatsby-config.js
+```javascript:title=gatsby-config.js
 plugins: [
   {
     resolve: `gatsby-plugin-sass`,
@@ -67,12 +65,11 @@ plugins: [
 
 By default the node implementation of Sass (`node-sass`) is used. To use the implementation written in Dart (`dart-sass`), you can install `sass` instead of `node-sass` and pass it into the options as the implementation:
 
-```bash
+```shell
 npm install --save-dev sass
 ```
 
-```javascript
-// in gatsby-config.js
+```javascript:title=gatsby-config.js
 plugins: [
   {
     resolve: `gatsby-plugin-sass`,
@@ -91,8 +88,7 @@ SASS defaults to [10 digits of precision](https://github.com/sass/sass/pull/2297
 
 See [Bootstrap's documentation on theming](https://github.com/twbs/bootstrap/blob/master/site/content/docs/4.3/getting-started/theming.md#sass) for reference.
 
-```javascript
-// in gatsby-config.js
+```javascript:title=gatsby-config.js
 plugins: [
   {
     resolve: `gatsby-plugin-sass`,
@@ -104,12 +100,11 @@ plugins: [
 ]
 ```
 
-### Bootstrap 3 (with `bootstrap-sass`)
+#### Bootstrap 3 (with `bootstrap-sass`)
 
 See [`bootstrap-sass`](https://github.com/twbs/bootstrap-sass/blob/master/README.md#sass-number-precision) for reference.
 
-```javascript
-// in gatsby-config.js
+```javascript:title=gatsby-config.js
 plugins: [
   {
     resolve: `gatsby-plugin-sass`,
@@ -130,8 +125,7 @@ Any file with the `module` extension will use CSS Modules.
 
 To override the file regex for SASS or CSS modules,
 
-```javascript
-// in gatsby-config.js
+```javascript:title=gatsby-config.js
 plugins: [
   {
     resolve: `gatsby-plugin-sass`,
@@ -160,15 +154,13 @@ Using [resolve-url-loader](https://github.com/bholloway/resolve-url-loader) prov
 
 First:
 
-```javascript
-  npm install resolve-url-loader --save-dev
-  or
-  yarn add resolve-url-loader --dev
+```shell
+npm install resolve-url-loader --save-dev
 ```
 
 And then:
 
-```javascript
+```javascript:title=gatsby-config.js
 plugins: [
   {
     resolve: "gatsby-plugin-sass",
@@ -179,9 +171,9 @@ plugins: [
 ]
 ```
 
-You can also configure resolve-url-plugin providing some options (see plugin documentation for all options https://github.com/bholloway/resolve-url-loader):
+You can also configure resolve-url-plugin providing some options (see [plugin documentation](https://github.com/bholloway/resolve-url-loader) for all options):
 
-```javascript
+```javascript:title=gatsby-config.js
 plugins: [
   {
     resolve: "gatsby-plugin-sass",
@@ -198,7 +190,7 @@ plugins: [
 
 NOTE that adding resolve-url-loader will use `sourceMap: true` on sass-loader (as it is required for the plugin to work), you can then activate/deactivate source-map for sass files in the plugin:
 
-```javascript
+```javascript:title=gatsby-config.js
 plugins: [
   {
     resolve: "gatsby-plugin-sass",