├── .all-contributorsrc ├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .prettierignore ├── CONTRIBUTING.md ├── README.md ├── gatsby-browser.js ├── gatsby-config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── renovate.json ├── src ├── components │ ├── header.js │ ├── layout.js │ └── seo.js ├── css │ ├── global.css │ └── style.css ├── images │ ├── abduction-illustration.svg │ ├── cat-and-human-illustration.svg │ ├── dog-illustration.svg │ ├── hero.png │ └── tailwind-icon.png └── pages │ ├── 404.js │ └── index.js ├── tailwind.config.js └── yarn.lock /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "files": [ 3 | "README.md" 4 | ], 5 | "imageSize": 100, 6 | "commit": false, 7 | "contributors": [ 8 | { 9 | "login": "impulse", 10 | "name": "impulse", 11 | "avatar_url": "https://avatars3.githubusercontent.com/u/8146736?v=4", 12 | "profile": "http://impuls.dev", 13 | "contributions": [ 14 | "code" 15 | ] 16 | }, 17 | { 18 | "login": "gandreadis", 19 | "name": "Georgios Andreadis", 20 | "avatar_url": "https://avatars3.githubusercontent.com/u/5272244?v=4", 21 | "profile": "https://gandreadis.com", 22 | "contributions": [ 23 | "code" 24 | ] 25 | }, 26 | { 27 | "login": "altruisticsoftware", 28 | "name": "Chris", 29 | "avatar_url": "https://avatars3.githubusercontent.com/u/12105346?v=4", 30 | "profile": "https://github.com/altruisticsoftware", 31 | "contributions": [ 32 | "code" 33 | ] 34 | }, 35 | { 36 | "login": "dalwadani", 37 | "name": "Dhaifallah Alwadani", 38 | "avatar_url": "https://avatars1.githubusercontent.com/u/4618082?v=4", 39 | "profile": "https://github.com/dalwadani", 40 | "contributions": [ 41 | "code" 42 | ] 43 | }, 44 | { 45 | "login": "nigelb135", 46 | "name": "Nigel Ball", 47 | "avatar_url": "https://avatars2.githubusercontent.com/u/815408?v=4", 48 | "profile": "http://nigelball.org", 49 | "contributions": [ 50 | "ideas", 51 | "code" 52 | ] 53 | }, 54 | { 55 | "login": "monte-hayward", 56 | "name": "Monte Hayward", 57 | "avatar_url": "https://avatars3.githubusercontent.com/u/3780422?v=4", 58 | "profile": "https://github.com/monte-hayward", 59 | "contributions": [ 60 | "code" 61 | ] 62 | } 63 | ], 64 | "contributorsPerLine": 7, 65 | "projectName": "gatsby-starter-tailwind", 66 | "projectOwner": "Oddstronaut", 67 | "repoType": "github", 68 | "repoHost": "https://github.com" 69 | } 70 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .cache 2 | public 3 | node_modules 4 | tailwind.config.js -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-app" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Project dependencies 2 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 3 | .cache 4 | node_modules 5 | yarn-error.log 6 | 7 | # Build directory 8 | /public 9 | 10 | # macOS 11 | .DS_Store 12 | 13 | # deployment-specific configs 14 | now.json 15 | deploy.js 16 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | node_modules 3 | public -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | Hey, there! 👋 Any and all contributions are welcome. 4 | 5 | To lend a helping hand: 6 | * [Fork the repository](https://help.github.com/articles/fork-a-repo/) 7 | * Make your desired changes 8 | * [Create a pull request](https://help.github.com/articles/creating-a-pull-request/) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [GatsbyJS Tailwind Starter](https://gatsbyjs-starter-tailwindplay.appseed.us/) 2 | 3 | TailwindPlay - a simple landing page styled with [Tailwind CSS](https://tailwindcss.com/) and generated by [GatsbyJS](https://www.gatsbyjs.org/) 4 | 5 |
6 | 7 | ![Gatsby Tailwind Starter - Gif animated intro.](https://raw.githubusercontent.com/app-generator/static/master/products/gatsbyjs-starter-tailwindplay-intro.gif) 8 | 9 |
10 | 11 | ## What is Tailwind? 12 | >"Tailwind is a utility-first CSS framework for rapidly building custom user interfaces." 13 | –[Tailwind](https://tailwindcss.com) 14 | 15 |
16 | 17 | ## What is Gatsby? 18 | >"Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps." -[Gatsby](https://www.gatsbyjs.org/) 19 | 20 |
21 | 22 | ## Get started 23 | 24 | Install Gatsby CLI: 25 | ```sh 26 | npm i --global gatsby-cli 27 | ``` 28 | 29 | Create new Gatsby project using this starter: 30 | ```sh 31 | gatsby new my-new-website https://github.com/app-generator/gatsbyjs-starter-tailwindplay 32 | ``` 33 | 34 | Build stylesheet from Tailwind config and run the project in development mode: 35 | ```sh 36 | cd my-new-website 37 | npm run develop 38 | ``` 39 | 40 |
41 | 42 | ## Format and lint 43 | * `npm run analyze` - See what ESLint and Prettier can fix 44 | * `npm run fix` - Run Prettier and ESLint with the `--fix` option 45 | 46 |
47 | 48 | ## Build your site 49 | Use `npm run build` to build your site for production. 50 | 51 |
52 | 53 | ## Deploy 54 | 55 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/app-generator/gatsbyjs-starter-tailwindplay) 56 | 57 |
58 | 59 | ## Resources 60 | * [Gatsby documentation](https://www.gatsbyjs.org/docs/) 61 | * [Tailwind documentation](https://tailwindcss.com/docs/what-is-tailwind/) 62 | * [Prettier documentation](https://prettier.io/docs/en/index.html) 63 | * [ESLint documentation](https://eslint.org/docs/user-guide/configuring) 64 | 65 |
66 | 67 | ## Credits 68 | * [The original starter](https://github.com/Oddstronaut/gatsby-starter-tailwind) 69 | * [The design](https://www.tailwindtoolbox.com/templates/landing-page) 70 | * Images - [undraw.co](https://undraw.co/) 71 | 72 |
73 | 74 | ## Support 75 | 76 | For issues and features request, use **Github** or access the [support page](https://appseed.us/support) provided by **AppSeed** 77 | 78 |
79 | 80 | --- 81 | [GatsbyJS Tailwind Starter](https://gatsbyjs-starter-tailwindplay.appseed.us/) provided by **AppSeed** 82 | -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | import "./src/css/style.css"; 2 | import "./src/css/global.css"; 3 | 4 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | title: `TailwindPlay`, 4 | description: `GatsbyJS Starter styled with Tailwind CSS`, 5 | author: `@Sm0keDev`, 6 | github: `https://github.com/app-generator/gatsbyjs-starter-tailwindplay`, 7 | blog: `https://blog.appseed.us/tag/gatsbyjs`, 8 | product: `https://appseed.us/apps/gatsbyjs`, 9 | docs: `https://docs.appseed.us/apps/gatsbyjs` 10 | 11 | }, 12 | plugins: [ 13 | `gatsby-plugin-react-helmet`, 14 | { 15 | resolve: `gatsby-plugin-manifest`, 16 | options: { 17 | name: `gatsby-starter-tailwind`, 18 | short_name: `starter`, 19 | start_url: `/`, 20 | background_color: `#ffffff`, 21 | theme_color: `#4dc0b5`, 22 | display: `minimal-ui`, 23 | icon: `src/images/tailwind-icon.png` 24 | } 25 | }, 26 | `gatsby-plugin-postcss`, 27 | { 28 | resolve: "gatsby-plugin-purgecss", 29 | options: { 30 | tailwind: true, 31 | purgeOnly: ["src/css/style.css", "src/css/global.css"] 32 | } 33 | } 34 | ] 35 | }; 36 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@oddstronaut/gatsby-starter-tailwind", 3 | "description": "Gatsby starter styled with Tailwind", 4 | "version": "3.0.25", 5 | "author": "Taylor Bryant ", 6 | "dependencies": { 7 | "ftp-deploy": "^2.3.3", 8 | "gatsby": "2.10.4", 9 | "gatsby-plugin-manifest": "2.2.0", 10 | "gatsby-plugin-postcss": "2.1.0", 11 | "gatsby-plugin-purgecss": "4.0.0", 12 | "gatsby-plugin-react-helmet": "3.1.0", 13 | "graphql": "14.3.1", 14 | "prop-types": "15.7.2", 15 | "react": "16.8.6", 16 | "react-dom": "16.8.6", 17 | "react-helmet": "5.2.1" 18 | }, 19 | "keywords": [ 20 | "gatsby", 21 | "tailwind", 22 | "tailwindcss", 23 | "purgecss" 24 | ], 25 | "license": "MIT", 26 | "scripts": { 27 | "analyze:lint": "eslint --ext .jsx --ext .js .", 28 | "analyze:prettier": "prettier --list-different '**/*.{js,css,md,json}'", 29 | "analyze": "npm run analyze:lint && npm run analyze:prettier", 30 | "build": "yarn run clean && gatsby build", 31 | "deploy": "gatsby build --prefix-paths && node deploy", 32 | "develop": "gatsby develop", 33 | "fix:lint": "eslint --ext .jsx --ext .js . --fix", 34 | "fix:prettier": "prettier --write '**/*.{js,css,md,json}'", 35 | "fix": "npm run fix:lint && npm run fix:prettier", 36 | "start": "npm run develop", 37 | "serve": "gatsby serve", 38 | "test": "echo \"Write tests! -> https://gatsby.app/unit-testing\"" 39 | }, 40 | "devDependencies": { 41 | "babel-eslint": "10.0.2", 42 | "eslint": "6.0.0", 43 | "eslint-config-react-app": "4.0.1", 44 | "eslint-plugin-flowtype": "3.11.1", 45 | "eslint-plugin-import": "2.17.3", 46 | "eslint-plugin-jsx-a11y": "6.2.1", 47 | "eslint-plugin-react": "7.14.1", 48 | "prettier": "1.18.2", 49 | "tailwindcss": "1.0.4" 50 | }, 51 | "repository": { 52 | "type": "git", 53 | "url": "https://github.com/oddstronaut/gatsby-starter-tailwind" 54 | }, 55 | "bugs": { 56 | "url": "https://github.com/oddstronaut/gatsby-starter-tailwind/issues" 57 | }, 58 | "publishConfig": { 59 | "access": "public" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const tailwindcss = require("tailwindcss"); 2 | 3 | module.exports = { 4 | plugins: [tailwindcss("./tailwind.config.js"), require("autoprefixer")] 5 | }; 6 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["config:base"], 3 | "assignees": ["taylorbryant"], 4 | "bumpVersion": "patch" 5 | } 6 | -------------------------------------------------------------------------------- /src/components/header.js: -------------------------------------------------------------------------------- 1 | import { Link } from "gatsby"; 2 | import PropTypes from "prop-types"; 3 | import React, { useState } from "react"; 4 | 5 | function Header({ siteTitle }) { 6 | const [isExpanded, toggleExpansion] = useState(false); 7 | 8 | return ( 9 | 68 | ); 69 | } 70 | 71 | Header.propTypes = { 72 | siteTitle: PropTypes.string 73 | }; 74 | 75 | Header.defaultProps = { 76 | siteTitle: `` 77 | }; 78 | 79 | export default Header; 80 | -------------------------------------------------------------------------------- /src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import { StaticQuery, graphql } from "gatsby"; 4 | 5 | import heroImg from "../images/hero.png"; 6 | 7 | function Layout({ children }) { 8 | return ( 9 | ( 22 | 23 | 24 | {children} 25 | 26 | {/* Navigation */} 27 | 66 | 67 | {/* Hero */} 68 |
69 | 70 |
71 | 72 |
73 |

Open-Source project

74 |

GatsbyJS Tailwind Starter

75 |

76 | {data.site.siteMetadata.title} - a simple landing page styled with Tailwind CSS 77 | {' '} and generated by GatsbyJS 78 |

79 | 80 |
81 | 82 |
83 | 84 |
85 | 86 |
87 | 88 |
89 | 90 |
91 | 92 |
93 | 94 | {/* Waves SVG */} 95 |
96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 |
109 | 110 | {/* Alternate features */} 111 |
112 |
113 |

{data.site.siteMetadata.title}

114 |
115 |
116 |
117 | 118 |
119 |
120 |

Built in GatsbyJS

121 |

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

122 | 123 | Images from: undraw.co

124 | 125 |
126 |
127 | 128 | travel booking 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 |
180 |
181 | 182 | 183 |
184 |
185 | 186 | connected world 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 |
221 |
222 |
223 |

Styled with Tailwind CSS

224 |

Tailwind CSS 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 opinionated styles you have to fight to override.

225 | Images from: undraw.co

226 |
227 |
228 | 229 |
230 |
231 |
232 | 233 | {/* Title cards */} 234 |
235 | 236 |
237 | 238 |

Text Cards

239 |
240 |
241 |
242 | 243 |
244 | 253 |
254 |
255 | 256 |
257 |
258 |
259 | 260 | 261 | 262 |
263 | 272 |
273 |
274 | 275 |
276 |
277 |
278 | 279 | 280 | 281 |
282 |
283 | 284 |

Open-Source

285 | 286 |

287 | The source code is released under a license in which the copyright holder grants users the rights to study, change, and distribute the software to anyone and for any purpose. 288 |

289 | 290 |
291 |
292 |
293 | 294 |
295 |
296 |
297 | 298 | 299 |
300 | 301 |
302 | 303 | {/* Pricing cards */} 304 |
305 | 306 |
307 | 308 |

Pricing

309 |
310 |
311 |
312 | 313 |
314 | 315 |
316 |
317 |
Free
318 |
    319 |
  • Thing
    • 320 |
  • Thing
    • 321 |
  • Thing
    • 322 |
323 |
324 |
325 |
£0 for one user
326 |
327 | 328 |
329 |
330 |
331 | 332 |
333 |
334 |
Basic
335 |
336 |
    337 |
  • Thing
    • 338 |
  • Thing
    • 339 |
  • Thing
    • 340 |
  • Thing
    • 341 |
342 |
343 |
344 |
£x.99 / per user
345 |
346 | 347 |
348 |
349 |
350 | 351 |
352 |
353 |
Pro
354 |
    355 |
  • Thing
    • 356 |
  • Thing
    • 357 |
  • Thing
    • 358 |
359 |
360 |
361 |
£x.99 / per user
362 |
363 | 364 |
365 |
366 |
367 | 368 |
369 | 370 |
371 | 372 |
373 | 374 | {/* Waves SVG */} 375 | 376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | {/* CTA block */} 393 |
394 | 395 |

Call to Action

396 |
397 |
398 |
399 | 400 |

Read more about GatsbyJS

401 | 402 |
403 | 405 |
406 | 407 |
408 | 409 | {/* Footer */} 410 | 485 | 486 | 487 | )} 488 | /> 489 | ); 490 | } 491 | 492 | Layout.propTypes = { 493 | children: PropTypes.node.isRequired 494 | }; 495 | 496 | export default Layout; 497 | -------------------------------------------------------------------------------- /src/components/seo.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import PropTypes from "prop-types"; 3 | import Helmet from "react-helmet"; 4 | import { StaticQuery, graphql } from "gatsby"; 5 | 6 | function SEO({ description, lang, meta, keywords, title }) { 7 | return ( 8 | { 11 | const metaDescription = 12 | description || data.site.siteMetadata.description; 13 | return ( 14 | 0 56 | ? { 57 | name: `keywords`, 58 | content: keywords.join(`, `) 59 | } 60 | : [] 61 | ) 62 | .concat(meta)} 63 | /> 64 | ); 65 | }} 66 | /> 67 | ); 68 | } 69 | 70 | SEO.defaultProps = { 71 | lang: `en`, 72 | meta: [], 73 | keywords: [] 74 | }; 75 | 76 | SEO.propTypes = { 77 | description: PropTypes.string, 78 | lang: PropTypes.string, 79 | meta: PropTypes.array, 80 | keywords: PropTypes.arrayOf(PropTypes.string), 81 | title: PropTypes.string.isRequired 82 | }; 83 | 84 | export default SEO; 85 | 86 | const detailsQuery = graphql` 87 | query DefaultSEOQuery { 88 | site { 89 | siteMetadata { 90 | title 91 | description 92 | author 93 | } 94 | } 95 | } 96 | `; 97 | -------------------------------------------------------------------------------- /src/css/global.css: -------------------------------------------------------------------------------- 1 | 2 | .gradient { 3 | background: linear-gradient(90deg, #d53369 0%, #daae51 100%); 4 | } 5 | 6 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * This injects Tailwind's base styles, which is a combination of 3 | * Normalize.css and some additional base styles. 4 | * 5 | * You can see the styles here: 6 | * https://github.com/tailwindcss/tailwindcss/blob/master/css/base.css 7 | * 8 | * If using `postcss-import`, use this import instead: 9 | * 10 | * @import "tailwindcss/base"; 11 | */ 12 | @tailwind base; 13 | 14 | /** 15 | * This injects any component classes registered by plugins. 16 | * 17 | * If using `postcss-import`, use this import instead: 18 | * 19 | * @import "tailwindcss/components"; 20 | */ 21 | @tailwind components; 22 | 23 | /** 24 | * Here you would add any of your custom component classes; stuff that you'd 25 | * want loaded *before* the utilities so that the utilities could still 26 | * override them. 27 | * 28 | * Example: 29 | * 30 | * .btn { ... } 31 | * .form-input { ... } 32 | * 33 | * Or if using a preprocessor or `postcss-import`: 34 | * 35 | * @import "components/buttons"; 36 | * @import "components/forms"; 37 | */ 38 | 39 | /** 40 | * This injects all of Tailwind's utility classes, generated based on your 41 | * config file. 42 | * 43 | * If using `postcss-import`, use this import instead: 44 | * 45 | * @import "tailwindcss/utilities"; 46 | */ 47 | @tailwind utilities; 48 | 49 | /** 50 | * Here you would add any custom utilities you need that don't come out of the 51 | * box with Tailwind. 52 | * 53 | * Example : 54 | * 55 | * .bg-pattern-graph-paper { ... } 56 | * .skew-45 { ... } 57 | * 58 | * Or if using a preprocessor or `postcss-import`: 59 | * 60 | * @import "utilities/background-patterns"; 61 | * @import "utilities/skew-transforms"; 62 | */ 63 | -------------------------------------------------------------------------------- /src/images/abduction-illustration.svg: -------------------------------------------------------------------------------- 1 | taken -------------------------------------------------------------------------------- /src/images/cat-and-human-illustration.svg: -------------------------------------------------------------------------------- 1 | chilling -------------------------------------------------------------------------------- /src/images/dog-illustration.svg: -------------------------------------------------------------------------------- 1 | cautious dog 1 -------------------------------------------------------------------------------- /src/images/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/gatsbyjs-starter-tailwindplay/148a4d7d16722edff890e90bedb4469bfbb5fdc5/src/images/hero.png -------------------------------------------------------------------------------- /src/images/tailwind-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/app-generator/gatsbyjs-starter-tailwindplay/148a4d7d16722edff890e90bedb4469bfbb5fdc5/src/images/tailwind-icon.png -------------------------------------------------------------------------------- /src/pages/404.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Layout from "../components/layout"; 4 | import SEO from "../components/seo"; 5 | import abductionIllustration from "../images/abduction-illustration.svg"; 6 | 7 | function NotFoundPage() { 8 | return ( 9 | 10 | 11 |
12 | Ghost getting abducted by aliens 17 |

18 | Looks like this page is a ghost that got abducted by aliens... 19 |

20 |
21 | 22 | ); 23 | } 24 | 25 | export default NotFoundPage; 26 | -------------------------------------------------------------------------------- /src/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import Layout from "../components/layout"; 4 | import SEO from "../components/seo"; 5 | import catAndHumanIllustration from "../images/cat-and-human-illustration.svg"; 6 | 7 | function IndexPage() { 8 | return ( 9 | 10 | 11 | 15 | 16 | 17 | ); 18 | } 19 | 20 | export default IndexPage; 21 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | // See https://next.tailwindcss.com/docs/configuration for details 2 | 3 | module.exports = { 4 | theme: {}, 5 | variants: {}, 6 | plugins: [] 7 | }; 8 | --------------------------------------------------------------------------------