React JS
The following process will be used to apply theme in your site.
Install Tailwind CSS: Begin by installing the latest version of Tailwind CSS in your React JS project. You can do this by referring to the official Vite guide for React JS at https://tailwindcss.com/docs/guides/vite#react.
Configuration File: Copy the tailwind.config.cjs file from the theme and add it to the root of your React JS project. This configuration file allows you to customize various aspects of the Tailwind CSS framework to match the theme.
CSS Folder: Copy the css folder from src/assets/css of the theme and add it to your React JS project's src directory. This folder contains the necessary CSS files for the theme.
Tailwind CSS File: Copy the tailwind css file from src/tailwind.css of the theme and add it to your React JS project's src directory. This file contains the Tailwind directives and necessary CSS for the theme.
Google Font Link: In the head tag of your React JS project's index.html file, include the link to the Google Font used in the theme:
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
CSS Import: In your React JS project's /src/main.tsx file, import the theme's CSS file: import './tailwind.css';
Development Mode: During development, run the following command in your React JS project's terminal to start the development server: npm run dev
Production Build: When you're ready to build your React JS project for production, run the following command: npm run build
Next JS Page router
The following process will be used to apply theme in your site.
Install Tailwind CSS: Begin by installing the latest version of Tailwind CSS in your Next JS project. You can do this by referring to the official Vite guide for Next JS at https://tailwindcss.com/docs/guides/nextjs.
Configuration File: Copy the tailwind.config.cjs file from the theme and add it to the root of your Next JS project. This configuration file allows you to customize various aspects of the Tailwind CSS framework to match the theme.
CSS Folder: Copy the css folder from styles/css of the theme and add it to your Next JS project's src directory. This folder contains the necessary CSS files for the theme.
Google Font Link: In the head tag of your Next JS project's pages/_document.tsx file, include the link to the Google Font used in the theme:
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
CSS Import: In your Next JS project's pages/_app.tsx file, import the theme's CSS file: import '../styles/tailwind.css';
Development Mode: During development, run the following command in your Next JS project's terminal to start the development server: npm run dev
Production Build: When you're ready to build your Next JS project for production, run the following command: npm run build
Next JS App router
The following process will be used to apply theme in your site.
Install Tailwind CSS: Begin by installing the latest version of Tailwind CSS in your Next JS project. You can do this by referring to the official Vite guide for Next JS at https://tailwindcss.com/docs/guides/nextjs.
Configuration File: Copy the tailwind.config.cjs file from the theme and add it to the root of your Next JS project. This configuration file allows you to customize various aspects of the Tailwind CSS framework to match the theme.
CSS Folder: Copy the css folder from styles/css of the theme and add it to your Next JS project's src directory. This folder contains the necessary CSS files for the theme.
Google Font: In the import section of your Next JS project's app/layout.tsx file, include the code to the Google Font used in the theme:
import { Nunito } from 'next/font/google'; const nunito = Nunito({ weight: ['400', '500', '600', '700', '800'], subsets: ['latin'], display: 'swap', variable: '--font-nunito', }); <body className={nunito.variable}></body>CSS Import: In your Next JS project's app/layout.tsx file, import the theme's CSS file: import '../styles/tailwind.css';
Development Mode: During development, run the following command in your Next JS project's terminal to start the development server: npm run dev
Production Build: When you're ready to build your Next JS project for production, run the following command: npm run build
React + Laravel
The following process will be used to apply theme in your site.
Install Tailwind CSS: Begin by installing the latest version of Tailwind CSS in your React JS project. You can do this by referring to the official Vite guide for React JS at https://tailwindcss.com/docs/guides/vite#react.
Configuration File: Copy the tailwind.config.cjs file from the theme and add it to the root of your React JS project. This configuration file allows you to customize various aspects of the Tailwind CSS framework to match the theme.
CSS Folder: Copy the css folder from resources/js/src/assets/css of the theme and add it to your React JS project's src directory. This folder contains the necessary CSS files for the theme.
Tailwind CSS File: Copy the tailwind css file from resources/js/src/tailwind.css of the theme and add it to your React JS project's src directory. This file contains the Tailwind directives and necessary CSS for the theme.
Google Font Link: In the head tag of your React JS project's resources/views/app.blade.php file, include the link to the Google Font used in the theme:
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
CSS Import: In your your project's resources/js/src/main.tsx file, import the theme's CSS file: import './tailwind.css';
Development Mode: During development, run the following command in your React JS project's terminal to start the development server: npm run dev
Production Build: When you're ready to build your React JS project for production, run the following command: npm run build