Table of contents

• Getting started
• Envs
• Add Tailwind-Css-Components
• Concepts
• Added Library

Getting started

this is aexol-nextjjs-starter Best nextjs setup if you are starting a new project

Download the repo

npm i

Run your develop environment

npm run dev

localhost:3000/

Envs

Create Your own .env.development and .env.production files in root folder to define environment variables for development and production in this format:

NEXT_PUBLIC_HOST=https://somegraphqlbackend.com/graphql

Add Tailwind-Css-Components

1. Install tailwindcss and its peer dependencies:

   npm install -D tailwindcss postcss autoprefixer

2. Run the init command to generate both tailwind.config.js and postcss.config.js:

   npx tailwindcss init -p

3. Configure tailwind.config.js file:

module.exports = {
    mode: 'jit',
    purge: ['./src/**/*.{js,ts,jsx,tsx}'],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

4. Add the Tailwind directives to ./styles/global.css:

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

5. Install tailwind-styled-components:

   npm i tailwind-styled-components

6. Now you can use tailwind-styled-components:

   import tw from 'tailwind-styled-components';

   <H1>Tailwind Styled Component!</H1>

   const H1 = tw.h1`
   text-xl
   text-green-500
   `;

Concepts

This repo boilerplate uses:

• NextJs ^12
• TypeScript
• Emotion
• Zeus

Added Library:

1. @emotion/css - https://github.com/emotion-js/emotion