Added Documentation for using Tailwind with Gatsby #10898

jakedohm · 2019-01-07T21:33:41Z

Description

I added a document with a walkthrough of how to get Tailwind CSS up and running with Gatsby via PostCSS. Based on: https://dev.to/jakedohm_34/using-tailwind-with-gatsby-js-10fj

Let me know if anything is missing, or any corrections need to be made!

LekoArts

Some comments from me. I feel like CSS-in-JS should also be given some exposure as I personally use CSS-in-JS 100% of the time now and using Tailwind with the babel macro is really easy

docs/docs/tailwind-css.md

LekoArts · 2019-01-08T09:53:57Z

docs/docs/tailwind-css.md

+plugins: [`gatsby-plugin-postcss`],
+```
+
+3. Add a PostCSS Config File


Couldn't this step be bundled with step 6? Step 6 just would tell the user to create the file with the following contents

LekoArts · 2019-01-08T09:54:42Z

docs/docs/tailwind-css.md

+
+`npm install tailwindcss --save-dev`
+
+5. Generate Tailwind Config File


Suggested change

5. Generate Tailwind Config File

5. Generate Tailwind config file

LekoArts · 2019-01-08T09:55:43Z

docs/docs/tailwind-css.md

+
+5. Generate Tailwind Config File
+
+To configure Tailwind, we'll need to add a Tailwind configuration file. Luckily, Tailwind has a built-in script to do this. Just run the following command:


Suggested change

To configure Tailwind, we'll need to add a Tailwind configuration file. Luckily, Tailwind has a built-in script to do this. Just run the following command:

To configure Tailwind, you'll need to add a Tailwind configuration file. Luckily, Tailwind has a built-in script to do this. Just run the following command:

LekoArts · 2019-01-08T09:55:57Z

docs/docs/tailwind-css.md

+./node_modules/.bin/tailwind init
+`
+
+6. Configure PostCSS to Use Tailwind


Suggested change

6. Configure PostCSS to Use Tailwind

6. Configure PostCSS to use Tailwind

LekoArts · 2019-01-08T09:56:08Z

docs/docs/tailwind-css.md

+})
+```
+
+7. Use the Tailwind Directives in Your CSS


Suggested change

7. Use the Tailwind Directives in Your CSS

7. Use the Tailwind directives in your CSS

LekoArts · 2019-01-08T09:56:53Z

docs/docs/tailwind-css.md

+
+### Other resources
+
+- [Introduction to postcss](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/)


Suggested change

- [Introduction to postcss](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/)

- [Introduction to PostCSS](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/)

docs/docs/tailwind-css.md

hagnerd · 2019-01-08T14:45:03Z

Also food for thought, I would recommend adding in how to use it with PurgeCSS since Tailwind generates so much CSS and the end user likely will only use a small portion of what was generated.

Co-Authored-By: jakedohm <jake.dohm@me.com>

jakedohm · 2019-01-08T15:17:33Z

I think I'm going to re-structure the article like so:

Tailwind Installation & Configuration

Installing Tailwind
Adding config file

Using Tailwind

PostCSS
- Installation/Usage steps
CSS-in-JS
- Installation/Usage steps

Since the you have to install and configure Tailwind for both methods, I think it makes sense to only do that stuff in one place, and then show them how to implement either method. Does that sound good to you @LekoArts?

@hagnerd I'll also add instructions for how to enable PurgeCSS!

LekoArts · 2019-01-08T15:38:32Z

Yeah, sounds good!

calcsam · 2019-01-25T23:20:45Z

Hey @jakedohm, wanted to check where you were on this? More and more people are asking about Gatsby and Tailwind so would be great to get this in if you're able to finish it up!

jakedohm · 2019-01-26T18:34:29Z

@calcsam @LekoArts hi again! I've updated the docs in my latest commit to show steps for usage with both PostCSS (standard) and CSS-in-JS.

I think this should be pretty close, but feedback is welcome!

calcsam · 2019-01-28T04:57:26Z

This looks great, thanks @jakedohm! I'll add a follow-up PR adding this to the docs hierarchy!

gatsbot · 2019-01-28T04:57:34Z

Holy buckets, @jakedohm — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. (Currently we’ve got a couple t-shirts available, plus some socks that are really razzing our berries right now.)
We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!

* Added doc for using Tailwind with Gatsby * Add link to Tailwind Co-Authored-By: jakedohm <jake.dohm@me.com> * Update docs/docs/tailwind-css.md Co-Authored-By: jakedohm <jake.dohm@me.com> * Updating to include both PostCSS and CSS-in-JS setup

Added doc for using Tailwind with Gatsby

1576edf

jakedohm requested a review from a team January 7, 2019 21:33

LekoArts suggested changes Jan 8, 2019

View reviewed changes

LekoArts added the type: documentation An issue or pull request for improving or updating Gatsby's documentation label Jan 8, 2019

LekoArts and others added 2 commits January 8, 2019 09:51

Add link to Tailwind

b56a107

Co-Authored-By: jakedohm <jake.dohm@me.com>

Update docs/docs/tailwind-css.md

103e5a3

Co-Authored-By: jakedohm <jake.dohm@me.com>

Updating to include both PostCSS and CSS-in-JS setup

e3474cc

calcsam approved these changes Jan 28, 2019

View reviewed changes

calcsam merged commit 8c4f481 into gatsbyjs:master Jan 28, 2019

calcsam mentioned this pull request Jan 28, 2019

feat: add tailwind-css to doc hierarchy #11345

Merged

MaxMood96 mentioned this pull request Jun 22, 2022

[Snyk] Security upgrade eslint from 4.19.1 to 5.7.0 MaxMood96/gatsby#504

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added Documentation for using Tailwind with Gatsby #10898

Added Documentation for using Tailwind with Gatsby #10898

jakedohm commented Jan 7, 2019

LekoArts left a comment

LekoArts Jan 8, 2019

LekoArts Jan 8, 2019

LekoArts Jan 8, 2019

LekoArts Jan 8, 2019

LekoArts Jan 8, 2019

LekoArts Jan 8, 2019

hagnerd commented Jan 8, 2019

jakedohm commented Jan 8, 2019

LekoArts commented Jan 8, 2019

calcsam commented Jan 25, 2019

jakedohm commented Jan 26, 2019

calcsam commented Jan 28, 2019

gatsbot bot commented Jan 28, 2019


		`npm install tailwindcss --save-dev`

		5. Generate Tailwind Config File


		5. Generate Tailwind Config File

		To configure Tailwind, we'll need to add a Tailwind configuration file. Luckily, Tailwind has a built-in script to do this. Just run the following command:

	To configure Tailwind, we'll need to add a Tailwind configuration file. Luckily, Tailwind has a built-in script to do this. Just run the following command:
	To configure Tailwind, you'll need to add a Tailwind configuration file. Luckily, Tailwind has a built-in script to do this. Just run the following command:

	6. Configure PostCSS to Use Tailwind
	6. Configure PostCSS to use Tailwind

	7. Use the Tailwind Directives in Your CSS
	7. Use the Tailwind directives in your CSS


		### Other resources

		- [Introduction to postcss](https://www.smashingmagazine.com/2015/12/introduction-to-postcss/)

Added Documentation for using Tailwind with Gatsby #10898

Added Documentation for using Tailwind with Gatsby #10898

Conversation

jakedohm commented Jan 7, 2019

Description

LekoArts left a comment

Choose a reason for hiding this comment

LekoArts Jan 8, 2019

Choose a reason for hiding this comment

LekoArts Jan 8, 2019

Choose a reason for hiding this comment

LekoArts Jan 8, 2019

Choose a reason for hiding this comment

LekoArts Jan 8, 2019

Choose a reason for hiding this comment

LekoArts Jan 8, 2019

Choose a reason for hiding this comment

LekoArts Jan 8, 2019

Choose a reason for hiding this comment

hagnerd commented Jan 8, 2019

jakedohm commented Jan 8, 2019

LekoArts commented Jan 8, 2019

calcsam commented Jan 25, 2019

jakedohm commented Jan 26, 2019

calcsam commented Jan 28, 2019

gatsbot bot commented Jan 28, 2019