bkuste2 / react-tailwind-template

React + Tailwind + Eslint/Prettier

This template provides a basic setup for working with React (Vite). Here we use tailwind for styles, Axios and tanstack/react-query for data fetching and we use rocketseat/eslint-config for eslint (with prettier plugin) to promote better code standardization.

Additionally, we provide some aliases to make it easier to import folders.

• @vite
• @tailwind
• @Axios
• @React Query
• @Storybook
• @eslint
• @prettier
• @rocketseat-eslint-config

To use this template you need to follow the next steps

git clone https://github.com/Bkuste2/react-tailwind-template.git
cd react-tailwind-template
yarn install
yarn dev

Aliases

These aliases are pre-configured in the project to help you with development

• @
• @pages
• @components
• @services
• @contexts
• @helpers
• @types

If you want to create any alias, just follow the example below:

• vite.config.ts

export default defineConfig({
  /* rest of your defineConfig function */
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'), // example
      'your_alias': resolve(__dirname, 'folder_path'),
    },
  },

})

• tsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"], // example
      "your_alias/*": ["folder_path/*"]
    }
  }
}

Snippets

fc

Create a simple functional component initial setup

export interface FilenameProps {}

export const Filename: React.FC<FilenameProps> = () => {
  return (
   <div className="">
     <h1>Filename</h1>
   </div>
  )
}

cs

Create all useState structure

const [$1, set${2:$1}] = useState<$3>($4)

sb

Snippet to initial setup StorybookFile

import { Meta, StoryObj } from '@storybook/react'

export default {
	title: 'Component/ComponentName',
	component: ComponentName,
} as Meta

export const Default: StoryObj = {}

sbv

Snippet create an storybook variant

export const ${1:Default}: StoryObj = {}

react-tailwind-template's Issues

Wrong Alias Config

Some aliases are not working as expected due to wrong configuration