cidc-reactjs-app

[!NOTE]

Issues and its Fixes

Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies to work around this error.

npm install --save-dev @babel/plugin-transform-private-property-in-object

Cannot find module 'ajv/dist/compile/codegen'

npm install --save-dev ajv@^7

[!IMPORTANT]

Install Tailwind CSS

npm install tailwindcss postcss-cli autoprefixer

Configure Tailwind CSS

Generate a Tailwind CSS Configuration file by running

npx tailwindcss init

This will create a tailwind.config.js file in your project root and paste the following code

/** @type {import('tailwindcss').Config} \*/
module.exports = {
content: [
"./src/**/\*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

Set Up PostCSS Configuration

Create a postcss.config.js file in your project's root directory with the following content:

module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
}

Create your styles

Create a CSS file (e.g., styles.css) in your src folder and include the following:

/_ src/styles.css _/
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Import styles in React

In your src/index.tsx file, import your styles.css:

Start your development server

Now, run your development server to see Tailwind CSS in action:

npm start