Create template from scratch

Create template from scratch:

1. Create vite project:

yarn create vite

2. Change directory to newly created project:

cd <project-name-folder>

3. Install required packages from vite:

yarn install

4. Install react-router:

yarn add react-router-dom@latest

5. Install more packages (dev dependencies):

• Prettier: prettier
• Eslint: eslint, eslint-plugin-react
• Storybook: @storybook/addon-postcss

yarn add --save-dev prettier eslint eslint-plugin-react @storybook/addon-postcss

6. Install tailwindcss:

• Install package:

  yarn add --dev vite-plugin-windicss windicss

• Follow instructions from windicss documentation: https://windicss.org/integrations/vite.html

• Install "sort class" plugin for windicss (from tailwindcss):

  NOTE: Create "tailwind.config.js" to avoid errors. Tailwind plugins don't support windicss functions, such as: addDynamic,...

  yarn add --dev prettier-plugin-tailwindcss

7. Install storybook:

• Create storybook:

  npx sb init

• Fix storybook error "ERR_OSSL_EVP_UNSUPPORTED":

  Edit npm script:

  "storybook": "SET NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",

8. Install Mantine:

yarn add @mantine/hooks @mantine/core

NOTE: Override Mantine configs with WindiCSS configs. More detail in file CustomMantineProvider.jsx.

NOTE: This project is loaded with Google Fonts: Inter, Barlow, Roboto Slab, Space Mono.

I still keep base Mantine configs if windicss doesn't have those configs (lines commented with: "Base Mantine")

Base Mantine theme

Base Windicss theme