taylorbryant / gatsby-starter-tailwind

Gatsby starter styled with Tailwind CSS

Hi, I’m Taylor. 👋

I build software to help people with OCD at a startup called NOCD. In my spare time, I write music and build open-source projects.

Elsewhere

• LinkedIn
• Twitter

gatsby-starter-tailwind's Issues

Upgrade to Tailwind CSS v1.0

The beta version of Tailwind CSS v1.0 is now available. Once v1.0 is out of beta, the project needs to be updated to use it.

@impulse did the lion's share of this work in #17 (thank you ❤️ ).

eslint expected overrides Array, got object. `eslint-config-react-app`

Error: ESLint configuration in .eslintrc.json » eslint-config-react-app is invalid:
        - Property "overrides" is the wrong type (expected array but got `{"files":["**/*.ts","**/*.tsx"],"parser":"@typescript-eslint/parser","parserOptions":{"ecmaVersion":2018,"sourceType":"module","ecmaFeatures":{"jsx":true},"warnOnUnsupportedTypeScriptVersion":true},"plugins":["@typescript-eslint"],"rules":{"default-case":"off","no-dupe-class-members":"off","@typescript-eslint/no-angle-bracket-type-assertion":"warn","no-array-constructor":"off","@typescript-eslint/no-array-constructor":"warn","@typescript-eslint/no-namespace":"error","no-unused-vars":"off","@typescript-eslint/no-unused-vars":["warn",{"args":"none","ignoreRestSiblings":true}],"no-useless-constructor":"off","@typescript-eslint/no-useless-constructor":"warn"}}`).

Referenced from: /path/to/FORKS/gatsby-starter-tailwind/.eslintrc.json
    at validateConfigSchema (/path/to/FORKS/gatsby-starter-tailwind/node_modules/eslint/lib/shared/config-validator.js:286:15)
    at ConfigArrayFactory._normalizeConfigData (/path/to/FORKS/gatsby-starter-tailwind/node_modules/eslint/lib/cli-engine/config-array-factory.js:468:9)
    at ConfigArrayFactory._loadConfigData (/path/to/FORKS/gatsby-starter-tailwind/node_modules/eslint/lib/cli-engine/config-array-factory.js:413:21)
    at ConfigArrayFactory._loadExtendedShareableConfig (/path/to/FORKS/gatsby-starter-tailwind/node_modules/eslint/lib/cli-engine/config-array-factory.js:713:21)
    at ConfigArrayFactory._loadExtends (/path/to/FORKS/gatsby-starter-tailwind/node_modules/eslint/lib/cli-engine/config-array-factory.js:612:25)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (/path/to/FORKS/gatsby-starter-tailwind/node_modules/eslint/lib/cli-engine/config-array-factory.js:544:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (/path/to/FORKS/gatsby-starter-tailwind/node_modules/eslint/lib/cli-engine/config-array-factory.js:490:20)
    at _normalizeObjectConfigData.next (<anonymous>)
    at createConfigArray (/path/to/FORKS/gatsby-starter-tailwind/node_modules/eslint/lib/cli-engine/config-array-factory.js:306:25)

Gatsby Starter Page Demo Link and Preview Image Not Working

Looks like you've updated the url to your demo page,

but gatsby documentation is still pointing to your old version.
see here

is this such a quick PR to gatsby??

How to add global css?

I'm trying to add custom classes with tailwind @apply to global.css but they are not processed. @apply ends up in the html.

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .toggle-checkbox:checked {
      @apply: right-0 border-green-400;
      right: 0;
      border-color: #68D391;
  }
}

Add a netlify.toml file

Add a netlify.toml that lists the build command and output directory required to use the starter. That way, a user of the starter won’t need to fiddle with the build settings in Netlify.

CSS conflict issues

Just after fresh install, there are 4 warnings related to flex and block css classes:

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#L15

i'd be happy to contribute that if you consider it helpful.
thanks,
Monte

FeatReq: update to Tailwind v3

Now that Tailwind 3 is released, would be good to see it in this starter with the new stable JIT engine.

Must use "npm run build" instead of "gatsby build"

I noticed that the CSS purging only works when using npm run build, this should be documented.

Link to PurgeCSS is incorrect

Should be https://www.purgecss.com/

Test_001_react_tailwind

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.

how to update tailwind css ?

Restructure start to use Gatsby v2

Right now, the starter uses Gatsby v1. I need to restructure the project to work with Gatsby v2.

I'll need to:

• Revisit the structure to implement best practices for v2
• Deal with any breaking changes

Create a Gatsby Theme for the updatable pieces of the starter

https://www.gatsbyjs.org/docs/themes/what-are-gatsby-themes/#gatsby-themes

Audit the document outline of the HTML

Make sure the example HTML is semantic and renders a good document outline. Use a tool like HTML5 Outliner.

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. 🤔

Upgrade to Tailwind v2

v2 of Tailwind CSS was just released. We need to update the starter to use it.

If anyone wants to tackle this, go for it! You can use the new default color palette. There's no need to preserve the old colors we're using.

Unable to start new project - Error: Cannot find module 'core-js/modules/es6.object.assign'

To reproduce:

npm i --global gatsby-cli
gatsby new test https://github.com/taylorbryant/gatsby-starter-tailwind
cd test
gatsby develop

output;

success open and validate gatsby-configs - 0.130s
success load plugins - 0.316s
success onPreInit - 0.013s
success initialize cache - 0.007s
success copy gatsby files - 0.062s
success onPreBootstrap - 0.011s
success createSchemaCustomization - 0.010s
success source and transform nodes - 0.040s
success building schema - 0.213s
success createPages - 0.002s
warn Warning: Empty string transition configs (e.g., `{ on: { '': ... }}`) for transient transitions are deprecated. Specify the transition in the `{ always: ... }` property instead. Please check
warn Warning: Empty string transition configs (e.g., `{ on: { '': ... }}`) for transient transitions are deprecated. Specify the transition in the `{ always: ... }` property instead. Please check
warn Warning: Empty string transition configs (e.g., `{ on: { '': ... }}`) for transient transitions are deprecated. Specify the transition in the `{ always: ... }` property instead. Please check
warn Warning: Empty string transition configs (e.g., `{ on: { '': ... }}`) for transient transitions are deprecated. Specify the transition in the `{ always: ... }` property instead. Please check
warn Warning: Empty string transition configs (e.g., `{ on: { '': ... }}`) for transient transitions are deprecated. Specify the transition in the `{ always: ... }` property instead. Please check
success createPagesStatefully - 0.113s
success updating schema - 0.035s
success onPreExtractQueries - 0.002s
success extract queries from components - 0.143s
success write out redirect data - 0.012s
success Build manifest and related icons - 0.097s
success onPostBootstrap - 0.105s
info bootstrap finished - 3.343s
success run page queries - 0.036s - 6/6 164.82/s
success write out requires - 0.007s

 ERROR

Cannot find module 'core-js/modules/es6.object.assign'
Require stack:
- /Users/dd/Projects/test/node_modules/gatsby/dist/utils/webpack.config.js
- /Users/dd/Projects/test/node_modules/gatsby/dist/utils/start-server.js
- /Users/dd/Projects/test/node_modules/gatsby/dist/services/start-webpack-server.js
- /Users/dd/Projects/test/node_modules/gatsby/dist/services/index.js
- /Users/dd/Projects/test/node_modules/gatsby/dist/commands/develop-process.js
- /Users/dd/Projects/test/.cache/tmp-33960-sa7046STp0RJ

  - loader.js:957 Function.Module._resolveFilename
    internal/modules/cjs/loader.js:957:15

  - helpers.js:83 Function.resolve
    internal/modules/cjs/helpers.js:83:19

Enable cssnano only for production

Having cssnano optimizing the css during development it not really necessary. I propose to activate it during production only.

postCssPlugins: [
          require(`tailwindcss`)(`./tailwind.config.js`),
          require(`autoprefixer`),
          ...process.env.NODE_ENV === 'production'
            ? [require(`cssnano`)]
            : []
        ]

I can create a PR for it if you like.

Create a blog variant of the starter

Create a version of this starter that includes a blog.

FeatReq: update to gatsby v3

Would be nice to have a v3 compatible starter.

Error when adding new page

Hi I just cloned the repo and ran npm install things work fine until I add a new page in src/pages/ I see following error:

Warning: React version not specified in eslint-plugin-react settings. See https://github.com/yannickcr/eslint-plugin-react#configuration.
Do anyone else experiencing it?

Prevent tailwind from styling md content

Hi, 👋

Thanks for this starter.

I'm reading some markdown from the local md files using the transformer and displaying them onto the page (typical blog scenario) I want to prevent tailwind interfering with the md output so it's printed as is on to the page.

Is there a workaround for this?

Thanks!

Test_001_react_tailwind

PWA: service worker, offline, start_url

Lighthouse notes that app is almost there as a progressive Web app.
I can add gatsby-plugin-offline, which fixed the issue for a similar app.

Current page does not respond with a 200 when offline If you're building a Progressive Web App, consider using a service worker so that your app can work offline.

start_url does not respond with a 200 when offline
Unable to fetch start URL via service worker.
A service worker enables your web app to be reliable in unpredictable network conditions

Does not register a service worker that controls page and start_url
The service worker is the technology that enables your app to use many Progressive Web App features, such as offline, add to homescreen, and push notifications. Learn more.

Add deployment instructions for Vercel

Recompile tailwind without restarting develop app

Description

Given gatsby develop app is running
When tailwind.config.js is updated
Then css is not recompiled
Then develop app should be restarted in order to apply the changes

Netlify demo is down

When one tries to open https://quizzical-mcclintock-0226ac.netlify.com it returns a Not Found error.

Eslint + Prettier

Wonderful clean starter! Thank you. Why not add Eslint (and Prettier)?

Add deployment instructions for Gatsby Cloud

Use Webpack to build styles instead of building with Purgecss/Tailwind CI commands

Getting Flash of Unstyled Content (FOUC)

Problem

Upon refreshing the page I'm seeing unstyled content.

I checked out previous commits to see when this started happening. This issue starts happening on this commit 0fab482. Seems to be an issue with migrating to tailwind 2.0

Steps to reproduce

1. Cloned project
2. Ran npm install
3. Ran npm start
4. Refreshed page (In Google Chrome clicked refresh button)

Add instructions for Tailwind UI

Add some instructions to the README on how to set up and use Tailwind UI with this starter

Add more example pages

The starter is very lean, but I don't think it really showcases what's possible with Tailwind CSS. I would like to add more example pages that show off Tailwind CSS, but keep the starter as simple as possible.

Don't use `align-items: center` on main content

It's fine on smaller screens but looks weird on 4k displays.

Tailwind CSS extensions aren't working for gatsby build/serve

Hi

I have the following code in my tailwind.config.js file:

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: [
          'Nunito',
          ...defaultTheme.fontFamily.sans,
        ]
      },
      colors: {
        wordpress: '#2E73A5',
        laravel: '#E95D46',
        gatsby: '#5F3994',
        resources: '#5DAFAB',
      },
    },
  },
  variants: {},
  plugins: []
};

This code works fine when running gatsby develop.

But when I do a gatsby build && gatsby serve, the colors do not work. Classes like bg-wordpress and text-laravel are never added to the generated CSS file.

Strangely enough the fontFamily does work.

Any ideas?

Thanks!

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?

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!

Use Tailwind's custom forms plugin for form examples

https://github.com/tailwindcss/custom-forms

SASS instead of normal CSS.

Can you please add SASS instead of normal CSS?

Lof of Warnings. How to fix this?

After trying to install it, I get a lot of warnings:

warning gatsby > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning gatsby > babel-plugin-add-module-exports > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning gatsby > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning gatsby > @babel/polyfill > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning gatsby > gatsby-cli > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning gatsby > webpack-dev-server > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning gatsby > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning gatsby > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning gatsby > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning gatsby > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning gatsby > @hapi/joi > @hapi/topo > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning gatsby > babel-plugin-add-module-exports > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning gatsby > gatsby-cli > gatsby-recipes > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning gatsby > gatsby-cli > gatsby-recipes > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning gatsby > gatsby-cli > yurnalist > babel-runtime > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning gatsby > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning gatsby > eslint-plugin-graphql > graphql-config > [email protected]: GraphQL Import has been deprecated and merged into GraphQL Tools, so it will no longer get updates. Use GraphQL Tools instead to stay up-to-date! Check out https://www.graphql-tools.com/docs/migration-from-import for migration and https://the-guild.dev/blog/graphql-tools-v6 for new changes.
warning gatsby > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning gatsby > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning gatsby-plugin-offline > workbox-build > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning gatsby-plugin-sharp > probe-image-size > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142

Any idea how to fix this?

Flash of unstyled content on initial page load in dev

When running the starter in dev, on initial page load, there's a flash of unstyled content. Look into ways to prevent this.

How is this purging unused css?

I see no Purgecss plugin. Is that happening somewhere else?

CSS broken for page layout wrapper on production build

My site works perfectly in development, but when I try building it, the resulting site has a large portion of CSS rules totally missing. Most of the broken CSS is in the header and footer of my wrapPageElement. Inside my layout, the header and footer background and text colors go white, and centering and widths are gone, but the fonts, font sizes, and hover styles are still working.

Upon inspecting the page, I can see that all the rules for my own classes are gone, as well as most of the CSS rules for Tailwind itself. I have no network errors or missing files. Most of my CSS rules are just not getting included in a production build, but it all works perfectly in development.

Here's my plugins:

[
	`gatsby-plugin-eslint`,
	`gatsby-plugin-react-helmet`,
	{
		resolve: `gatsby-plugin-manifest`,
		options: {
			name: `gatsby-starter-tailwind`,
			short_name: `starter`,
			start_url: `/`,
			background_color: fullConfig.theme.colors.white,
			theme_color: fullConfig.theme.colors.teal["400"],
			display: `minimal-ui`,
			icon: `src/images/tailwind-icon.png`,
		},
	},
	{
		resolve: `gatsby-plugin-postcss`,
		options: {
			postCssPlugins: [
				require(`tailwindcss`)(tailwindConfig),
				require(`autoprefixer`),
				...(process.env.NODE_ENV === `production`
					? [require(`cssnano`)]
					: []),
			],
		},
	},
	{
		resolve: `gatsby-source-wordpress-experimental`,
		options: {
			url: `https://wp.example.com/graphql`,
			html: {
				createStaticFiles: true
			}
		},
	},
	`gatsby-plugin-sharp`,
	`gatsby-transformer-sharp`,
	`gatsby-plugin-offline`,
]

Here is my gatsby-browser.js where I register my layout wrapper:

import React from 'react';
import { Layout } from './src/components/Layout/Layout';
import './src/css/style.css';

export const wrapPageElement = ({ element, props }) => {
	return (
		<Layout
			title="Home"
			keywords={[`gatsby`, `tailwind`, `react`, `tailwindcss`]}
		>
			{ element }
		</Layout>
	);
};

I have CSS rules in the './src/css/style.css', and Layout component imports more CSS files itself.