Tailwind CSS - hdknr/gatsby-home GitHub Wiki

Gatsby Recipes: Add Tailwind CSS

% gatsby recipes

  ╔══════════════════════════════════════════════════════════════════════╗
  ║                                                                      ║
  ║   Thank you for trying the experimental version of Gatsby Recipes!   ║
  ║                                                                      ║
  ╚══════════════════════════════════════════════════════════════════════╝

    Please ask questions, share your recipes, report bugs, and
    subscribe for updates in our umbrella issue at
    https://github.com/gatsbyjs/gatsby/issues/22991


Select a recipe to run
  Add a custom ESLint config
  Add Jest
  Add Gatsby Theme Blog
  Add Gatsby Theme Blog Core
  Add Gatsby Theme Notes
  Add persistent layout component with gatsby-plugin-layout
  Add Theme UI
  Add Emotion
  Add support for MDX Pages
  Add support for MDX Pages with images
  Add Styled Components
>>Add Tailwind
  Add Sass
  Add Typescript
  Add Cypress testing
  Add animated page transition support
  Add plugins to make site a PWA
  Add React Helmet
  Add GitHub Pages deployment with Travis CI
  Add Headless WordPress integration
  Add Storybook - JavaScript
  Add Storybook - TypeScript
  Add AVA
  Add Preact
  Add GitLab CI/CD
Setup Gatsby with Tailwind CSS

Tailwind CSS (​https://tailwindcss.com/​) is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinio
nated styles you have to fight to override.

Step 1 / 3
Install necessary NPM packages

Proposed changes

NPMPackage:
 * Install tailwindcss@latest

NPMPackage:
 * Install gatsby-plugin-postcss@latest


Step 1
Install necessary NPM packages

✅ Installed NPM package [email protected]
✅ Installed NPM package [email protected]


Step 2 / 3
Install necessary Gatsby Plugins

Proposed changes

GatsbyPlugin:
 * Install gatsby-plugin-postcss in gatsby-config.js
---
- Original  - 1
+ Modified  + 0

@@ -3,7 +3,6 @@
   *
   * See: https://www.gatsbyjs.org/docs/gatsby-config/
   */
-
  module.exports = {
    /* Your site config here */
    plugins: [
---

File:
 * Write tailwind.config.js
---
- Original  -  1
+ Modified  + 11

- module.exports = {}
+ module.exports = {
+   purge: [
+     './src/**/*.js',
+   ],
+   theme: {
+     extend: {}
+   },
+   variants: {},
+   plugins: []
+ }
+
---

File:
 * Write src/styles/tailwind.css
---
- Original  - 0
+ Modified  + 5

+ @tailwind base;
+
+ @tailwind components;
+
+ @tailwind utilities;
---

File:
 * Write src/pages/usingtailwind.js
---
- Original  - 0
+ Modified  + 7

+ import React from 'react'
+ import '../styles/tailwind.css'
+
+ export default () => (
+   <h1 className="text-3xl">This is a 3xl text</h1>
+ )
+
---

File:
 * Write tailwind.config.js
---
- Original  -  1
+ Modified  + 11

- module.exports = {}
+ module.exports = {
+   purge: [
+     './src/**/*.js',
+   ],
+   theme: {
+     extend: {}
+   },
+   variants: {},
+   plugins: []
+ }
+
---

File:
 * Write src/styles/tailwind.css
---
- Original  - 0
+ Modified  + 5

+ @tailwind base;
+
+ @tailwind components;
+
+ @tailwind utilities;
---

File:
 * Write src/pages/usingtailwind.js
---
- Original  - 0
+ Modified  + 7

+ import React from 'react'
+ import '../styles/tailwind.css'
+
+ export default () => (
+   <h1 className="text-3xl">This is a 3xl text</h1>
+ )
+
---
⚠️ **GitHub.com Fallback** ⚠️