Installing Create React App and Tailwind CSS

This article is part of a wider family of articles exploring Zendesk custom pages. You can find out more about other technologies we used and their implementations into custom pages in this article.

In this article, we’ll setup a new app with Create React App and add Tailwind CSS to the project and do some basic configuration.

• Open your favorite terminal app (I like iterm2) and cd into the directory you want to store this project.

Install React with Typescript

• As a step 0, it is recommended that you uninstall any globally installed create-react-app projects.

npm uninstall -g create-react-app

• Now we’ll use Create React App (CRA) to set us up with a quick single page app. There is a template for Typescript, so let’s use that. The CRA for Typescript docs have a lot of great information for using Typescript in React, so take a look if you’re interested. I’m naming my project “custom-pages-tailwind”, but you can use any other name that you’d prefer.

npx create-react-app custom-pages-tailwind — template typescript

Installing and basic setup for Tailwind CSS

• cd into the new directory that you created

cd custom-pages-tailwind

• Install Tailwind and dependencies

npm install -D tailwindcss postcss autoprefixer

• Generate Tailwind and postcss config files

npx tailwindcss init -p

• In the project root, open the tailwind.config.js file and add the paths for your template files to the content array.

module.exports = {
 content: [
 "./src/**/*.{js,jsx,ts,tsx}",
 ],
 theme: {
 extend: {},
 },
 plugins: [],
}

• Add the tailwind directives to ./src/index.css. Note that you can just replace all of the css in here with these three lines, or you can leave it. I personally remove it since I won’t be using it.

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

And that’s it, you’re all set to go! Enter npm run start and you’ll have your basic configuration app running! To get webpack setup, you can follow the next article in this series.