Tailwind CSS ➕ Emotion Starter for Next.js

Kick off your project with this bare-bones Tailwind CSS + Emotion starter for Next.js. This starter ships with the packages and configuration files you need to get hit the ground running on your next Tailwind CSS project.

💄 Demo

You can see a demo of the frontend over yonder.

🚀 Quick start

1. Create a Next.js project.

   Use create-next-app to create a new application specifying the next-tailwind-emotion-starter starter.

   yarn create next-app my-next-tailwind-emotion-starter -e https://github.com/pauloelias/next-tailwind-emotion-starter
   # or
   npx create-next-app my-next-tailwind-emotion-starter -e https://github.com/pauloelias/next-tailwind-emotion-starter

2. Start developing.

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

   cd my-next-tailwind-emotion-starter/
   yarn run dev

3. Open the source code and start editing!

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

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

✨ Features?

This starter contains has the following features enabled by default:

• Tailwind CSS: The full power of Tailwind is at your fingertips. Style your components using twin.macro to add Tailwind classes to your project.
• Emotion: Best-in-class CSS-in-JS support with Emotion. Write your own custom styled components with Emotion or use twin.macro inside your styled components to add Tailwind CSS classes alongside your custom styling.
• PostCSS: Use the flexibility of PostCSS to extend Tailwind's CSS or write your own CSS. Postcss-Preset-Env is enabled out-of-the box allowing you to write tomorrow's CSS today!

The rest of the Starter is based off of the Next.js default starter.

📦 Example Components

To use Tailwind CSS classes inside of your components you use the twin.macro package. You can also create richer styled components using a combination of both Tailwind's classes and your own custom CSS with Emotion. Laslty, if needed, you can use PostCSS to write your own custom CSS as well.

Standalone Tailwind Classes

import tw from "twin.macro"

const Heading = tw.h1`
  text-2xl text-gray-500 uppercase
`

export default () => (
  <div>
    <Heading>Hello, world!</Heading>
  </div>
)

Styled Components with Emotion

import tw, { styled } from "twin.macro"

import pattern from "../images/pattern.png"

const Container = styled.div`
    ${tw`bg-gray-100 w-full`}
    background-image: url(${background});
    padding: 15px;
`

export default () => (
  <Container>
    <h1>Hello, world!</h1>
  </Container>
)

Combined Standalone + Styled Components Example

import tw, { styled } from "twin.macro"
import pattern from "../assets/images/pattern.png"

const Container = styled.div`
    ${tw`bg-gray-100 w-full`}
    background-image: url(${pattern});
    padding: 15px;
`

const Heading = tw.h1`
  text-2xl text-gray-500 uppercase
`

export default () => (
  <Container>
    <Heading>Hello, world!</Heading>
  </Container>
)

CSS Prop to inline Tailwind Classes

import tw, { css } from "twin.macro"

export default () => (
  <div
    css={css`
      ${tw`flex items-center justify-between px-4 py-3`}
    `}
  >
    <h1>Hello, world!</h1>
    <h2>I'm a flex item too!</h2>
  </div>
)

🧐 What's inside?

A quick look at the top-level files and directories you'll see inside this project.

.
├── .babelrc
├── .eslintignore
├── .gitignore
├── .nvmrc
├── .prettierignore
├── .prettierrc
├── .stylelint.config.js
├── .vscode/
├── LICENSE
├── README.md
├── assets/
├── babel-plugin-macros.config.js
├── components/
├── next.config.js
├── package.json
├── pages/
├── postcss.config.js
├── public/
└── tailwind.config.js

1. .babelrc: This configuration file allows us to fine-tune Babel's configuration settings. In this starter we are adding the babel-preset-gatsby preset to allow us to customize Babel as needed.

2. .eslintignore: This file specifies files and folders that we want to exclude from linting with Eslint.

3. .gitignore: This file tells git which files it should not track / not maintain a version history for.

4. .nvmrc: The .nvmrc allows you to lock down a project's node version when using nvm.

5. .prettierignore: This file allows us to specifiy files that we want to exclude from formatting with Prettier.

6. .prettierrc: This is a configuration file for Prettier. Prettier is a tool to help keep the formatting of your code consistent.

7. .stylelint.config.js: Stylelint configuration file to customize stylelint rules in the project. Styleline is enabled to tame CSS errors displayed in some editors due to TailwindCSS's syntaxt inside CSS files.

8. .vscode/: Base VS Code settings and extensions are provided to help make your life easier.

9. LICENSE: Next.js is licensed under the MIT license.

10. README.md: A text file containing useful reference information about this project.

11. assets/: This directory contains assets that can be compiled with your project.

12. babel-plugin-macros.config.js: This file helps us configure Tailwind CSS macros to be used with Emotion, our CSS-in-JS tool of choice.

13. components/: Add this directory to your project. You will save your React component files inside this directory.

14. next.config.js: This file allows you to customize advanced features of Next.js. We use this to configure the Next.js server and build phases. It's not included in the browser build.

15. package.json: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project.

16. pages/: Your page components live inside here. Next.js pages are associated with routes based on the file name.

17. postcss.config.js: This configuration file allows us to customize our PostCSS settings. PostCSS is used to compile the custom css we write outside of Emotion.

18. public/: You can place static assets that do not need to be compiled in this directory.

19. tailwind.config.js: This is the default Tailwind CSS configuration file.

💫 Deploy

✅ To Do

• Pass Server Data Directly to a Next.js Page during SSR

📚 Learn More About Next.js

To learn more about Next.js, use the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!