Project Setup

We have created a GitHub repository with the initial setup to make it easier for you. You can fork or clone the repository and start working on the project. The branch should be 0-start.

git clone https://github.com/Frontend-Hire/stackpack-webcontainers-react-typescript.git

Then run the following commands:

cd stackpack-webcontainers-react-typescript
npm install

If you want to do this manually, check out the project setup in the course: Todo App with React, TypeScript, and TDD

Tailwind CSS

We will use Tailwind CSS to style our application. This course is not a Tailwind CSS course, so I will not cover the basics of Tailwind CSS. We recommend checking out the official documentation if you are new to Tailwind CSS.

However, we will cover the setup and usage of Tailwind CSS for our project. The setup is straightforward, and we follow the official documentation's install steps for Vite.

Installing Tailwind CSS

npm install -D tailwindcss@3.4.1 postcss@8.4.38 autoprefixer@10.4.19
npx tailwindcss init -p

This step will create a tailwind.config.js and a postcss.config.js file at the root of our project.

Next, we need to update our tailwind.config.js file with the following content:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

We must set up the Tailwind directives in our global CSS file, src/index.css

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

Let us run the dev server.

npm run dev

Make a slight change in the src/App.tsx file to see if Tailwind CSS works.

export default function App() {
  return <div className="text-3xl font-bold underline">Hello World!</div>;
}

We should see the following output in the browser.

Editor Setup for Tailwind CSS

We recommend setting up a few editor extensions to make working with Tailwind CSS easier.

1. Tailwind CSS IntelliSense: This extension provides IntelliSense for Tailwind CSS in your editor. A must-have extension for working with Tailwind CSS.

2. Inline-fold (Optional): This extension allows you to fold the Tailwind CSS classes in your editor. This helps to avoid bloating the editor with a lot of classes.

Prettier Plugin to sort Tailwind CSS classes

We recommend using the Official Prettier Plugin to sort the Tailwind CSS classes in your editor. This plugin dramatically reduces the cognitive load of working with the classes.

Install the plugin:

npm install -D prettier-plugin-tailwindcss@0.5.12

Add the plugin to your .prettierrc file:

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "plugins": ["prettier-plugin-tailwindcss"] 
}

Great, this wraps up this section. We have a decent project setup to start working on our application.

At this point, our code should match the code in the branch 1-project-setup.