Lesson 02. React project config with TailwindCSS

How to Create a React Project with TailwindCSS

1. Install Node.js:

   • Before installing anything, make sure you have Node.js installed on your system.
   • Check the Node.js version by running node -v in your terminal.

2. Create a React Project:

   • Open your terminal and create a new folder for your project.
   • Run the command npx create-react-app my-app to initialize a new React project with boilerplate code.
   • This command will create a folder structure for your project and install necessary dependencies.

3. Choose Fonts:

   • Select the font family you want to use in your project. In the video, the font family "Source Pro" was used.
   • Copy the import code for the selected fonts and paste it into your project's CSS file.

4. Explore Project Structure:

   • Understand the folder structure of your React project, especially the package.json file which contains project information and scripts.
   • Check the dependencies and scripts listed in the package.json file to understand the project setup.

5. Create Source Files:

   • Create a new folder named src in your project directory.
   • Inside the src folder, create an index.css file for styling.

6. Import Dependencies:

   • Import React and ReactDOM in your index.css file using ES6 import syntax.
   • Create a root container using ReactDOM.createRoot in your index.css file.

7. Set Up App Component:

   • Create a new JavaScript file (e.g., App.js) for your main component.
   • Define a function component named App and export it for use in other files.
   • Import the App component in your index.css file and render it using <App />.

8. Integrate TailwindCSS:

   • Install PostCSS and TailwindCSS by running npm install tailwindcss postcss autoprefixer.
   • Create a TailwindCSS configuration file by running npx tailwindcss init.
   • Restart your server to apply the TailwindCSS styles.

9. Apply TailwindCSS Styles:

   • Import the TailwindCSS styles at the top of your index.css file.
   • Start using TailwindCSS classes to style your components.
   • Use the TailwindCSS utility classes to customize text, font size, font weight, etc.

10. Explore TailwindCSS Features:

• Experiment with different TailwindCSS classes for styling elements in your React project.
• Test various styles such as font weight, text size, line height, etc., to customize your components.

11. Preview and Adjust Styles:

• View the changes in your project by running npm start in the terminal.
• Make adjustments to the styles in your CSS files and see the updates in real-time.

12. Next Steps:

• In the upcoming video, you will learn how to create components with a proper folder structure and recreate page elements like banners and navigation.

By following these steps, you can set up a React project with TailwindCSS and start styling your components effectively.