Gatsby Starter Tailwind
Uses Tailwind CSS' built-in purge option to remove unused CSS.
Illustrations by unDraw.
View demo here.
What is Tailwind CSS?
"Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces." –Tailwind CSS
What is Gatsby?
"Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps." -Gatsby
Get started
Install the Gatsby CLI:
npm install --global gatsby-cli
Create a new Gatsby project using this starter:
gatsby new my-new-website https://github.com/taylorbryant/gatsby-starter-tailwind
Build a stylesheet from your Tailwind CSS config and run the project in development mode:
cd my-new-website
npm run develop
Format and lint
npm run analyze
- See what ESLint and Prettier can fixnpm run fix
- Run Prettier and ESLint with the--fix
option
Build your site
Use npm run build
to build your site for production.
Deployment
Netlify
Vercel
Resources
License
How you can help
Enjoying Gatsby Starter Tailwind and want to help? You can:
- Create an issue with some constructive criticism
- Submit a pull request with some improvements to the project
Contributors
Thanks goes to these wonderful people (emoji key):
impulse |
Georgios Andreadis |
Chris |
Dhaifallah Alwadani |
Nigel Ball |
Monte Hayward |
Luke Bennett |
This project follows the all-contributors specification. Contributions of any kind welcome!
Using TailwindUI with Alpinejs OR React component for this starter
Hi,
I tried your project, and it was speedy to start.
Since this week, I'm using TailwindUI (TWUI). I tested TWUI's components with plain index.html files and it works perfectly. I did follow the configurations to add the @tailwindcss/ui plugin from the docs.
Now, I want to step up a notch by using Gatsby. That's why I found your project.
I tried to configure the TWUI elements in "gatsby-starter-tailwind," but I failed. There are too many errors to bug you with them. I'm new to Gatsby and React but comfortable with CSS stuff.
Question: do you plan to offer a template for the TWUI product? Looking at the docs it should be easy to do.
Thanks in advance!
Stuck at createPagesStatefully while executing gatsby develop
This is my second project working with this starter. I often get stuck on '⠋ createPagesStatefully'. When stuck, basically nothing happens. I would love to debug this issue, yet no idea where to start. 🤔
Lof of Warnings. How to fix this?
After trying to install it, I get a lot of warnings:
Any idea how to fix this?
chore(deps): bump gatsby-plugin-manifest from 2.4.22 to 2.4.23
Bumps gatsby-plugin-manifest from 2.4.22 to 2.4.23.
Changelog
Sourced from gatsby-plugin-manifest's changelog.
Commits
fb1753c
chore(release): Publishdf0cc1a
Upgrade semver (#26269)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and language@dependabot badge me
will comment on this PR with code to add a "Dependabot enabled" badge to your readmeAdditionally, you can set the following in your Dependabot dashboard:
Any tips on how I can get this starter to work with Tailwind UI components?
Hi Tailwind UI early access was released today. UI components, crafted by the creators of Tailwind CSS. HTML components, designed and developed by Adam Wathan and Steve Schoger. See https://tailwindui.com/
How do I get them included in the gatsby starter?
semantic elements use: main, nav / li ?
hey @taylorbryant & contributors, would you consider using semantic html5 elements in this starter?
examples:
an unordered list in nav.js instead of divs. https://github.com/Oddstronaut/gatsby-starter-tailwind/blob/667d5239dcf53bb3a6ad5337ac4655ffa047596b/src/components/header.js#L10
a
<main
element in pages: https://github.com/Oddstronaut/gatsby-starter-tailwind/blob/667d5239dcf53bb3a6ad5337ac4655ffa047596b/src/pages/index.js#L15i'd be happy to contribute that if you consider it helpful. thanks, Monte
Can't modify Tailwind config?
Hey, thanks for the template. I've been using it for a new project and it's worked great so far, but when I tried to add some new values to the tailwind.config.js it doesn't seem to generate the new selectors.
Do you happento know why this might be happening?
Thank you for sharing this template.
Unable to start new project - Error: Cannot find module 'core-js/modules/es6.object.assign'
To reproduce:
output;
Small, unrelated, minor updates
Hi @taylorbryant, Sorry that this PR is a fix of unrelated minor fixes, but I didn't think it was worth putting into several. I think the commits are pretty self explanitory, but I'll run through each quickly anyway:
Use consistent quotes:
Everything except for the purgecss plugin was using backticks, so I've updated that to be the same.
Put class names in the same order:
Most of the classes on the navigation links are the same, it's easier to read and more consistent if they are in the same order
Switch to useStaticQuery:
I find the Hooks syntax easier to read that the old StaticQuery, and it's what the Gatsby team are using for their starters now, so though it was worth updating here as well.
Update link to docs:
Tailwind 1.0 has been released, so the old link should be updated to reflect this.
Upgrade to Tailwind v1 beta.
Includes (unused) default v1 configuration in tailwind.default.js
Hi:
Thanks for this starter. I have created a branch to hold the changes needed to upgrade to v1 which should be released very soon.
Yjis is my first ever pull request so accept my apologies if I've missed something.
I have not tested deploy to Netlify or a production build, but dev build works fine.
Nigel
Bump postcss from 8.3.4 to 8.4.20
Bumps postcss from 8.3.4 to 8.4.20.
Release notes
Sourced from postcss's releases.
... (truncated)
Changelog
Sourced from postcss's changelog.
... (truncated)
Commits
1d4c509
Release 8.4.20 version905082a
Add Node.js 10 to CI20122e5
Fix childless at-rule map generationff7e8ce
Merge pull request #1801 from romainmenke/invalid-sourcemap-with-at-layer--pr...d585976
Fix CI744b15f
Update dependenciesdb935f1
invalid sourcemap with at layer3cac84a
Fix type tests5113edb
Update dependenciesc26baf3
Release 8.4.19 versionDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump prettier from 2.3.2 to 2.8.2
Bumps prettier from 2.3.2 to 2.8.2.
Release notes
Sourced from prettier's releases.
Changelog
Sourced from prettier's changelog.
... (truncated)
Commits
ac88438
Release 2.8.2aaf9190
Fix comments after directive (#14081)9e09a78
Stop inserting space in LESS property access (#14103)0c5d4f3
Fix removing commas from function arguments in maps (#14089)b77d912
ember / glimmer: Preserve self-closing tags (#13691)cf36209
Handlebars: Add tests for{{! prettier-ignore}}
(#13693)f8e1ad8
Add parens to head ofExpressionStatement
instead of whole statement (#14077)8034bad
Build(deps): Bump json5 from 2.2.0 to 2.2.3 in /scripts/release (#14104)31d4010
Build(deps): Bump json5 from 2.2.1 to 2.2.3 in /website (#14101)41cee06
Do not change case of property name if inside a variable declaration in LESS ...Maintainer changes
This version was pushed to npm by prettier-bot, a new releaser for prettier since your current version.
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump postcss from 8.3.4 to 8.4.21
Bumps postcss from 8.3.4 to 8.4.21.
Release notes
Sourced from postcss's releases.
... (truncated)
Changelog
Sourced from postcss's changelog.
... (truncated)
Commits
32ced0e
Release 8.4.21 versiona936b80
Update dependenciesc9bd445
Fix types4ad96d1
Merge pull request #1811 from hudochenkov/fix-input-types15f5fad
Add types for an Input.error()43bd2df
Merge pull request #1808 from hudochenkov/update-syntaxes292b8f0
Add postcss-styled-syntax to list of syntaxes29f5168
Update postcss-html and postcss-markdown repositories1d4c509
Release 8.4.20 version905082a
Add Node.js 10 to CIDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump json5 from 1.0.1 to 1.0.2
Bumps json5 from 1.0.1 to 1.0.2.
Release notes
Sourced from json5's releases.
Changelog
Sourced from json5's changelog.
... (truncated)
Commits
a62db1e
1.0.2e0c23fe
docs: update CHANGELOG for v1.0.262a6540
fix: add proto to objects and arraysDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.Bump express from 4.17.1 to 4.18.2
Bumps express from 4.17.1 to 4.18.2.
Release notes
Sourced from express's releases.
... (truncated)
Changelog
Sourced from express's changelog.
... (truncated)
Commits
8368dc1
4.18.261f4049
docs: replace Freenode with Libera Chatbb7907b
build: [email protected]f56ce73
build: [email protected]24b3dc5
deps: [email protected]689d175
deps: [email protected]340be0f
build: [email protected]33e8dc3
docs: use Node.js name style644f646
build: [email protected]ecd7572
build: [email protected]Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.Bump qs, body-parser and express
Bumps qs, body-parser and express. These dependencies needed to be updated together. Updates
qs
from 6.10.1 to 6.11.0Changelog
Sourced from qs's changelog.
Commits
56763c1
v6.11.0ddd3e29
[readme] fix version badgec313472
[New] [Fix]stringify
: revert 0e903c0; addcommaRoundTrip
option95bc018
v6.10.50e903c0
[Fix]stringify
: witharrayFormat: comma
, properly include an explicit `[...ba9703c
v6.10.44e44019
[Fix]stringify
: witharrayFormat: comma
, include an explicit[]
on a s...113b990
[Dev Deps] updateobject-inspect
c77f38f
[Dev Deps] updateeslint
,@ljharb/eslint-config
,aud
,has-symbol
,tape
2cf45b2
[meta] usenpmignore
to autogenerate an npmignore fileUpdates
body-parser
from 1.19.0 to 1.20.1Release notes
Sourced from body-parser's releases.
Changelog
Sourced from body-parser's changelog.
Commits
830bdfb
1.20.1ecad1cc
build: [email protected]03b93cf
build: [email protected]2c611fc
build: [email protected]f199e94
perf: remove unnecessary object clone0123e12
build: [email protected]de1e6c2
build: [email protected]477ff13
build: [email protected]40c3fff
deps: [email protected]4aa84b7
build: [email protected]Updates
express
from 4.17.1 to 4.18.2Release notes
Sourced from express's releases.
... (truncated)
Changelog
Sourced from express's changelog.
... (truncated)
Commits
8368dc1
4.18.261f4049
docs: replace Freenode with Libera Chatbb7907b
build: [email protected]f56ce73
build: [email protected]24b3dc5
deps: [email protected]689d175
deps: [email protected]340be0f
build: [email protected]33e8dc3
docs: use Node.js name style644f646
build: [email protected]ecd7572
build: [email protected]Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes
Sourced from decode-uri-component's releases.
Commits
a0eea46
0.2.2980e0bf
Prevent overwriting previously decoded tokens3c8a373
0.2.176abc93
Switch to GitHub workflows746ca5d
Fix issue where decode throws - fixes #6486d7e2
Update license (#1)a650457
Tidelift tasks66e1c28
Meta tweaksDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.