Create a React App

This creates a current React vite project using the TypeScript Template

npm create vite@latest name-of-your-project -- --template react-ts

After successfully creating the project cd into project and install dependencies

  1) cd name-of-your-project
  2) npm install / yarn / pnpn
  3) npm dev

Install Tailwind and Volta preset

This install the needed dependecies for tailwind and VoltaUI (RTFM for azure instructions) yarn npm install -D tailwindcss postcss autoprefixer @volta/styles

Create Config files

Init tailwindPreset, postCSS with the follwoninf

npx tailwindcss init -p

Configure Tailwind Setup

Your tailwind.config.[c]js looks like this for now:

/** @type {import('tailwindcss').Config} */
 
//const { join } = require("path");
 
import voltapreset from '@volta/styles';
 
module.exports = {
  // next line is only needed if you want to set your content path for your project
  // Read here: https://tailwindcss.com/docs/presets#merging-logic-in-depth
  content: [...voltapreset.content],
  presets: [voltapreset],
 
  theme: {
    extend: {},
  },
  plugins: [],
};

Deep Merge Logic

If you need to edit the content section. Read here Deep Merge Logic (opens in a new tab)

Add Tailwind Directives to Your CSS

Your index.css file contains some default styling. You can clear all that and paste the three lines of directives above.

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

Install RWE Fonts

Download the RWE Fonts from here. Unzip and move the folder to the ./public folder of your project the rest is soved by the Tailwind voltaplugin inside the Volta preset of your currently created Tailwind setup.

If the fonts should be hosted on a cdn, you may specify another location using a .env file.

FONT_URL=http://cdn.location.of.your/fonts

Install Volta UI Components

To install Volta UI components you need to have accesss to the private Registry on Azure Follow Instructions for your machine as described here: https://dev.azure.com/RWE-Renewables/VOLTA/_artifacts/feed/Volta/connect (opens in a new tab)

Update your tsconfig

In order to get proper code-completition in Visual Studio Code change modelResolution in your tsconfig.app.json from bundler to node.

Run Server

Start Your Vite Server Test if tailwind is working as expacted

clear App.tsx content and add a H1 Tag usunf these classes

<h1 className="text-4xl font-bold text-center">This is Tailwind</h1>