geekysrm

npx gatsby new your-gatsby-site

geekysrm

public class Hello1
{
   public static void Main()
   {
-      System.Console.WriteLine("Hello, World!");
+      System.Console.WriteLine("Rock all night long!");
   }
}

geekysrm

let foo = 'bar'

/**
Don't worry about the code block, it will be saved as a gist with right language format, and auto embed to your post.
**/

geekysrm

# Install Tailwind:
npm install tailwindcss --save-dev 

# Generate Tailwind config:
npx tailwind init

geekysrm

npm i @emotion/core @emotion/styled tailwind.macro@next gatsby-plugin-postcss postcss-import postcss-preset-env
# We are installing the 'next' version of tailwind micro so as to use TailwindCSS 1.0.0+ 
# For older versions of TailwindCSS, just install 'tailwind.macro'

geekysrm

module.exports = {
  plugins: [
    require("postcss-import")({
      plugins: [require("stylelint")],
    }),
    require("tailwindcss")("./tailwind.config.js"),
    require("postcss-preset-env")({
      autoprefixer: { grid: true },
      features: {
        "nesting-rules": true,

geekysrm

plugins: [
  ...
    {
      resolve: `gatsby-plugin-postcss`,
      options: {
        // Accepts all options defined by `gatsby-plugin-postcss` plugin.
      },
    },
   {
      resolve: `gatsby-plugin-emotion`,

geekysrm

@tailwind base;
@tailwind utilities;

geekysrm

// Edit the path to where you have kept the globals.css file
import "./src/styles/globals.css"

geekysrm

import React from "react";
import tw from "tailwind.macro";

const MyComponent = (
  <h4 css={tw`font-semibold text-lg leading-snug truncate`}>This is Soumya</h4>
);

export default MyComponent;