+ );
+}
+
+export default App;
+```
+
+The `App` function in App.js represents a React function component. In React, components can be defined as class components or function components. We will get into explaining more about these components in the next chapter when we start building out more components. You can create your components as a individual files (Single File Component - SFC). In React, html-like tags which are what we call JSX can be passed in the return statement to be returned. The JSX inside the return function is what the App.js will render out. JSX stands for JavaScript XML and is a syntax extension to JavaScript that allows you to write markup inside a React component.
+
+### Install TailwindCSS
+
+Before we go any further, let's install [TailwindCSS](https://tailwindcss.com/), the CSS utility library we will be using for styling of this project. Tailwind CSS is a highly customizable, low-level CSS framework that gives us all of the building blocks we need to build intuitive user interfaces. So, it is simply a utility first CSS framework. Let's install Tailwind:
+
+```bash
+npm i tailwindcss autoprefixer postcss-cli
+
+# OR
+
+yarn add tailwindcss autoprefixer postcss-cli.
+```
+
+More details on [here](https://tailwindcss.com/docs/installation).
+
+Now, we need to generate the configuration for tailwind which will create a minimal `tailwind.config.js` file at the root of your project:
+
+```bash
+npx tailwind init
+
+# OR
+npx tailwind init --full # with all default configuration
+
+touch postcss.config.js
+```
+
+After running the above commands, the `tailwind.config.js` file is created which contains all our default configuration. Next we need to install [CRACO (Create React App Configuration Override)](https://github.com/gsoft-inc/craco), an easy and comprehensible configuration layer for create-react-app, because Create React App doesn't let you override the PostCSS configuration natively.
+
+```bash
+npm install @craco/craco
+
+# OR
+
+yarn add @craco/craco
+```
+
+When the installation is complete, update your scripts in your `package.json` file to use `craco` instead of `react-scripts` for all scripts except eject:
+
+```diff
+"scripts": {
+- "start": "react-scripts start",
+- "build": "react-scripts build",
+- "test": "react-scripts test",
++ "start": "craco start",
++ "build": "craco build",
++ "test": "craco test",
+"eject": "react-scripts eject"
+},
+```
+
+Now, create a `craco.config.js` at the root of our project and add the tailwindcss and autoprefixer as PostCSS plugins:
+
+```bash
+touch craco.config.js
+```
+
+```js
+// craco.config.js
+module.exports = {
+ style: {
+ postcss: {
+ plugins: [
+ require('tailwindcss'),
+ require('autoprefixer'),
+ ],
+ },
+ },
+}
+```
+
+Because Tailwind is a library with default utility classes, CSS will be need to compiled for production. It is good practive to purge your project of unused styles in production builds so that load time is faster In your tailwind.config.js file, configure the purge option with the paths to all of your components so Tailwind can tree-shake unused styles in production builds:
+
+```diff
+// tailwind.config.js
+module.exports = {
+- purge: [],
++ purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+darkMode: false, // or 'media' or 'class'
+theme: {
+extend: {},
+},
+variants: {
+extend: {},
+},
+plugins: [],
+}
+```
+
+### Task
+
+
+---
+
+## Credits
+Written with ♥️ by [Jaeriah Tay](https://www.twitter.com/jaeriahtay)
\ No newline at end of file