{"componentChunkName":"component---node-modules-gatsby-theme-blog-core-src-templates-post-query-js","path":"/blog/gatsby-tailwind/","result":{"data":{"site":{"siteMetadata":{"title":"Geekynut","social":[{"name":"twitter","url":"https://twitter.com/geekynut"},{"name":"github","url":"https://github.com/geekynut"}]}},"blogPost":{"__typename":"MdxBlogPost","id":"1154b7c2-0034-53a3-a86e-45101a10de6d","excerpt":"Gatsby's hello-world starter with tailwind and sass preprocessor This starter ships with the main Gatsby configuration files, sass and…","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Tailwind and gatsby\",\n  \"path\": \"/blog/gatsby-tailwind\",\n  \"tags\": [\"gatsby\", \"tailwind\", \"sass\", \"blogs\"],\n  \"date\": \"2020-09-02T00:00:00.000Z\",\n  \"topic\": \"Frameworks\",\n  \"level\": \"intermediate\",\n  \"description\": \"Gatsby, sass and tailwind in one installation. An easy to go installation to start your gatsby blog using tailwind or sass.\"\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h4\", {\n    \"id\": \"gatsbys-hello-world-starter-with-tailwind-and-sass-preprocessor\"\n  }, \"Gatsby\\u2019s hello-world starter with tailwind and sass preprocessor\"), mdx(\"p\", null, \"This starter ships with the main Gatsby configuration files, sass and tailwind to get a ready to go website with React and tailwind.\"), mdx(\"h1\", {\n    \"id\": \"quick-start\"\n  }, \"Quick start\"), mdx(\"p\", null, \"Installation\"), mdx(\"p\", null, \"clone the git repo:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"git clone https://github.com/mrDevIll/gatsby-tailwind-sass-installer.git \\ncd gatsby-tailwind-sass-installer\\n\")), mdx(\"h3\", {\n    \"id\": \"installs-gatsby-and-tailwind-and-sass-dependencies\"\n  }, \"installs gatsby and tailwind and sass dependencies\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"npm install\\n#or using yarn\\nyarn install\\n\")), mdx(\"h3\", {\n    \"id\": \"start-developing\"\n  }, \"Start developing.\"), mdx(\"p\", null, \" Navigate into your new site\\u2019s directory and start it up.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"cd gatsby-tailwind-sass-installer/\\ngatsby develop\\n\")), mdx(\"h2\", {\n    \"id\": \"open-the-source-code-and-start-editing\"\n  }, \"Open the source code and start editing!\"), mdx(\"p\", null, \"Your site is now running at \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"http://localhost:8000\"), \"!\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Note: You\\u2019ll also see a second link: \"), mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"http://localhost:8000/___graphql\"), mdx(\"em\", {\n    parentName: \"p\"\n  }, \". This is a tool you can use to experiment with querying your data. Learn more about using this tool in the \", mdx(\"a\", _extends({\n    parentName: \"em\"\n  }, {\n    \"href\": \"https://www.gatsbyjs.com/tutorial/part-five/#introducing-graphiql\"\n  }), \"Gatsby tutorial\"), \".\")), mdx(\"p\", null, \"Open the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"my-hello-world-starter\"), \" directory in your code editor of choice and edit \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src/pages/index.js\"), \". Save your changes and the browser will update in real time!\"), mdx(\"h2\", {\n    \"id\": \"usage\"\n  }, \"Usage\"), mdx(\"p\", null, \"In  \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \" css/style.scss \"), \" you can add your sass customer code while \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \" css/tailwind.css \"), \" imports tailwind in your project.\\nIf you wish to import your sass files please add them to \\\"\\\"\\\" gatsby-browser.js \\\"\\\"\\\".\"), mdx(\"p\", null, \"You can use \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \" tailwind.config.js \"), \" to modify tailwind configuration.\"), mdx(\"p\", null, \"I added a layout component with a header, footer and layout.   \"));\n}\n;\nMDXContent.isMDXComponent = true;","slug":"/blog/gatsby-tailwind/","title":"Tailwind and gatsby","tags":["gatsby","tailwind","sass","blogs"],"keywords":[],"date":"September 02, 2020"},"previous":{"__typename":"MdxBlogPost","id":"ba3e513b-af97-5b72-94d6-589cea1df8a3","excerpt":"How to import custom fonts in Gatsby You can find information on how to set up gatsby  typography  on  gatsbyjs.org . This forum is built by…","slug":"/blog/typography/","title":"Gatsby Typography","date":"June 22, 2020"},"next":{"__typename":"MdxBlogPost","id":"9091119a-fbaa-5157-acd1-0af39c7c4566","excerpt":"You can install the extension from the chrome webstore   Notemark A webextension that helps your research I created a small extension for…","slug":"/blog/notemark-webextension/","title":"Notemark","date":"January 27, 2021"}},"pageContext":{"id":"1154b7c2-0034-53a3-a86e-45101a10de6d","previousId":"ba3e513b-af97-5b72-94d6-589cea1df8a3","nextId":"9091119a-fbaa-5157-acd1-0af39c7c4566"}}}