Tailwind and gatsby

September 02, 2020

Gatsby’s hello-world starter with tailwind and sass preprocessor

This starter ships with the main Gatsby configuration files, sass and tailwind to get a ready to go website with React and tailwind.

Quick start

Installation

clone the git repo:

git clone https://github.com/mrDevIll/gatsby-tailwind-sass-installer.git 
cd gatsby-tailwind-sass-installer

installs gatsby and tailwind and sass dependencies

npm install
#or using yarn
yarn install

Start developing.

Navigate into your new site’s directory and start it up.

cd gatsby-tailwind-sass-installer/
gatsby develop

Open the source code and start editing!

Your site is now running at http://localhost:8000!

Note: You’ll also see a second link: http://localhost:8000/___graphql. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the Gatsby tutorial.

Open the my-hello-world-starter directory in your code editor of choice and edit src/pages/index.js. Save your changes and the browser will update in real time!

Usage

In css/style.scss you can add your sass customer code while css/tailwind.css imports tailwind in your project. If you wish to import your sass files please add them to """ gatsby-browser.js """.

You can use tailwind.config.js to modify tailwind configuration.

I added a layout component with a header, footer and layout.