Add tailwind (#65)

README.md

@@ -12,6 +12,12 @@
 yarn blog storybook
 ```
 
+#### Tailwind viewer
+
+```
+yarn blog theme
+```
+
 #### Everything
 
 ```

apps/blog/gatsby-browser.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import Layout from './src/components/layout'
+import './src/styles/global.css'
 
 export const wrapPageElement = ({ element, props }) => {
   const {

apps/blog/gatsby-config.js

@@ -1,4 +1,4 @@
-const {JSDOM} = require('jsdom')
+const { JSDOM } = require('jsdom')
 
 const localPlugins = [
   '@yummy/gatsby-categories',
@@ -18,54 +18,59 @@ const sourcePlugins = [
       queryLimit: 1000,
       loginData: {
         identifier: process.env.API_USER_EMAIL || '',
-        password: process.env.API_USER_PASSWORD || ''
-      }
-    }
+        password: process.env.API_USER_PASSWORD || '',
+      },
+    },
   },
   {
     resolve: 'gatsby-plugin-webpack-bundle-analyzer',
     options: {
       analyzerPort: 3005,
-      openAnalyzer: false
-    }
-  }
-]
-
-const typographyPlugins = process.env.GATSBY_SOURCE === 'test' ? [
-  {
-    resolve: 'gatsby-plugin-typography',
-    options: {
-      pathToConfigModule: 'src/utils/typography.fixed_face.js',
-    },
-  }
-] : [
-  {
-    resolve: 'gatsby-plugin-typography',
-    options: {
-      pathToConfigModule: 'src/utils/typography.js',
+      openAnalyzer: false,
     },
-  }
+  },
 ]
 
+const typographyPlugins =
+  process.env.GATSBY_SOURCE === 'test'
+    ? [
+        {
+          resolve: 'gatsby-plugin-typography',
+          options: {
+            pathToConfigModule: 'src/utils/typography.fixed_face.js',
+          },
+        },
+      ]
+    : [
+        {
+          resolve: 'gatsby-plugin-typography',
+          options: {
+            pathToConfigModule: 'src/utils/typography.js',
+          },
+        },
+      ]
+
 const dynamicPlugins = localPlugins
   .concat(sourcePlugins)
   .concat(typographyPlugins)
 
 module.exports = {
   siteMetadata: {
     title: 'Yummy',
-    description: 'Searchable repository of recipes we frequently use and are yummy.',
+    description:
+      'Searchable repository of recipes we frequently use and are yummy.',
     siteUrl: 'https://kuchnia-yummy.pl',
-    author: 'J. M. Derks'
+    author: 'J. M. Derks',
   },
   plugins: dynamicPlugins.concat([
     'gatsby-transformer-sharp',
     'gatsby-plugin-sharp',
+    'gatsby-plugin-postcss',
     {
-      'resolve': 'gatsby-transformer-remark',
-      'options': {
-        'excerpt_separator': '<!-- more -->'
-      }
+      resolve: 'gatsby-transformer-remark',
+      options: {
+        excerpt_separator: '<!-- more -->',
+      },
     },
     'gatsby-plugin-react-helmet',
     {
@@ -85,13 +90,15 @@ module.exports = {
         feeds: [
           {
             serialize: ({ query: { site, allStrapiRecipe } }) => {
-              return allStrapiRecipe.edges.map(edge => {
+              return allStrapiRecipe.edges.map((edge) => {
                 return {
                   title: edge.node.title,
-                  description: JSDOM.fragment(edge.node.parsedHeadline.childMarkdownRemark.html).textContent,
+                  description: JSDOM.fragment(
+                    edge.node.parsedHeadline.childMarkdownRemark.html,
+                  ).textContent,
                   date: edge.node.published_at,
                   url: site.siteMetadata.siteUrl + edge.node.slug,
-                  guid: site.siteMetadata.siteUrl + edge.node.slug
+                  guid: site.siteMetadata.siteUrl + edge.node.slug,
                 }
               })
             },
@@ -103,7 +110,7 @@ module.exports = {
               ) {
                 edges {
                   node {
-                    parsedHeadline { 
+                    parsedHeadline {
                       childMarkdownRemark {
                         html
                       }
@@ -134,7 +141,6 @@ module.exports = {
         icon: 'src/components/layout/assets/android-chrome-192x192.png',
       },
     },
-    'gatsby-plugin-eslint'
-  ],
-  )
+    'gatsby-plugin-eslint',
+  ]),
 }

apps/blog/package.json

@@ -73,24 +73,29 @@
     "@storybook/react": "^6.4.16",
     "@svgr/cli": "^6.2.1",
     "@yummy/eslint-config-core": "0.0.0",
+    "autoprefixer": "^10.4.7",
     "babel-loader": "^8.0.5",
     "blink-diff": "^1.0.13",
     "chromatic": "^6.4.2",
     "cypress": "^3.2.0",
     "cypress-testing-library": "^2.3.6",
     "eslint": "^7.19.0",
     "eslint-loader": "^2.1.2",
+    "gatsby-plugin-postcss": "^5.16.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-junit": "13.0.0",
     "mkdirp": "^0.5.1",
     "mocha": "^5.2.0",
     "mocha-junit-reporter": "^1.18.0",
+    "postcss": "^8.4.14",
     "puppeteer": "^1.13.0",
     "react-test-renderer": "^16.8.2",
     "start-server-and-test": "^1.7.11",
     "storybook-builder-vite": "^0.1.15",
     "style-loader": "^3.3.1",
     "svgo": "^2.8.0",
+    "tailwind-config-viewer": "^1.7.1",
+    "tailwindcss": "^3.1.2",
     "vite": "^2.8.1",
     "webpack": "^5.67.0"
   },
@@ -111,6 +116,7 @@
     "cy:open": "cypress open",
     "cy:run": "cypress run",
     "storybook": "ENV=USE_VITE_BUILDER=true start-storybook -p 6006",
+    "theme": "tailwind-config-viewer -o",
     "build-storybook": "build-storybook",
     "new-recipe": "hygen recipe new",
     "icons": "yarn svgr src/components/icons --out-dir src/components/icons --ext jsx",

apps/blog/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('tailwindcss')],
+}

apps/blog/src/styles/global.css

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

apps/blog/tailwind.config.js

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