add tailwind css

gatsby-browser.js

@@ -0,0 +1 @@
+import './src/styles/global.css'

gatsby-config.js

@@ -10,6 +10,7 @@ module.exports = {
     siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
   },
   plugins: [
+    `gatsby-plugin-postcss`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-image`,
     {

package.json

@@ -21,9 +21,13 @@
         "react-helmet": "^6.1.0"
     },
     "devDependencies": {
+        "autoprefixer": "^10.4.8",
         "eslint": "^8.18.0",
         "eslint-plugin-react": "^7.30.0",
-        "prettier": "2.5.1"
+        "gatsby-plugin-postcss": "^5.20.0",
+        "postcss": "^8.4.16",
+        "prettier": "2.5.1",
+        "tailwindcss": "^3.1.8"
     },
     "keywords": [
         "gatsby"
@@ -45,4 +49,4 @@
     "bugs": {
         "url": "https://github.com/gatsbyjs/gatsby/issues"
     }
-}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/components/teaser.js

@@ -3,9 +3,9 @@ import { storyblokEditable } from "gatsby-source-storyblok";
 
 const Teaser = ({ blok }) => {
   return (
-    <div {...storyblokEditable(blok)}>
-      <h1>{blok.headline}</h1>
-    </div>
+    <h2 className="text-2xl mb-10" {...storyblokEditable(blok)}>
+      {blok.headline}
+    </h2>
   )
 }
 

src/styles/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/pages/**/*.{js,jsx,ts,tsx}",
+    "./src/components/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}