VRISTO - Multipurpose Tailwind CSS Admin Template

Documentation

Preview Buy Now

HTML & PHP

The following process will be used to apply theme in your site.

Install Tailwind CSS: Ensure you have the latest version of Tailwind CSS installed by following the installation instructions provided at https://tailwindcss.com/docs/installation.
Configuration File: Copy the tailwind.config.js file from the Vristo theme and place it in the root directory of your project. This configuration file allows you to customize various aspects of the Tailwind CSS framework.
CSS Folder: Copy the css folder from assets/css of theme and add it to your project's assets directory. This folder contains the necessary CSS files for the theme.
Google Font Link: In the head tag of your project's HTML file, include the link to the Google Font you want to use for the theme.
```
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> 
```
For add custom font follow the step from Font Family.
Compiled CSS File: In the head tag of your HTML file, include the link to the compiled CSS file. This file combines the Tailwind CSS framework and the theme-specific styles.
```
<link href="assets/css/style.css" rel="stylesheet" /> 
```
Development Mode: During development, run the following command in your project's terminal to continuously watch for changes and recompile the CSS as needed:
npx tailwindcss -i assets/css/tailwind.css -o assets/css/style.css --watch
Production Mode: When you're ready to build your project for production, remember to run the following command to minify the CSS:
npx tailwindcss -i assets/css/tailwind.css -o assets/css/style.css --minify

Angular 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 Angular JS project. You can do this by referring to the official guide for Angular JS at https://tailwindcss.com/docs/guides/angular.
Configuration File: Copy the tailwind.config.js file from the theme and add it to the root of your Angular 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 Angular JS project's src directory. This folder contains the necessary CSS files for the theme.
Google Font Link: In the head tag of your Angular 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 Angular JS project's angular.json file, import the theme's CSS file: styles: [ "src/assets/css/app.css" ],
Development Mode: During development, run the following command in your Angular JS project's terminal to start the development server: npm start
Production Build: When you're ready to build your Angular JS project for production, run the following command: npm run build

Vue 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 Vue JS project. You can do this by referring to the official Vite guide for Vue JS at https://tailwindcss.com/docs/guides/vite#vue.
Configuration File: Copy the tailwind.config.cjs file from the theme and add it to the root of your Vue 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 public/assets/css of the theme and add it to your Vue JS project's public directory. This folder contains the necessary CSS files for the theme.
Google Font Link: In the head tag of your Vue 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 Vue JS project's /src/main.ts file, import the theme's CSS file: import '@/assets/css/app.css';
Development Mode: During development, run the following command in your Vue JS project's terminal to start the development server: npm run dev
Production Build: When you're ready to build your Vue JS project for production, run the following command: npm run build

Nuxt 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 Nuxt JS project. You can do this by referring to the official guide for Nuxt JS at https://tailwindcss.com/docs/guides/nuxtjs.
Configuration File: Copy the tailwind.config.cjs file from the theme and add it to the root of your Nuxt 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 assets/css of the theme and add it to your Nuxt JS project's root directory. This folder contains the necessary CSS files for the theme.

Google Font Link: In the head tag of your Nuxt JS project's nuxt.config.ts file, include the link to the Google Font used in the theme:

export default defineNuxtConfig({
    app: {
        head: {
            link: [
                { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' },
                {
                    rel: 'stylesheet',
                    href: 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap',
                },
            ],
        },
    },
});

CSS Import: In your Nuxt JS project's nuxt.config.ts file, add the theme's CSS file:

export default defineNuxtConfig({
    app: {
        css: ['~/assets/css/app.css'],
    },
});

Development Mode: During development, run the following command in your Nuxt JS project's terminal to start the development server: npm run dev
Production Build: When you're ready to build your Nuxt JS project for production, run the following command: npm run build

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

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 Laravel project. You can do this by referring to the official guide for Laravel at https://tailwindcss.com/docs/guides/laravel.
Configuration File: Copy the tailwind.config.js file from the Vristo theme and place it in the root directory of your project. This configuration file allows you to customize various aspects of the Tailwind CSS framework.
CSS Folder: Copy the css folder from resources/css of theme and add it to your project's assets directory. This folder contains the necessary CSS files for the theme.
Google Font Link: In the head tag of your project's default.blade.php, include the link to the Google Font you want to use for 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 Laravel project's resources/views/components/default.blade.php file, import the theme's CSS file:
```
@vite(['resources/css/app.css'])
```
Development Mode: During development, run the following command in your project's terminal to continuously watch for changes and recompile the CSS as needed:
npm run dev
Production Mode: When you're ready to build your project for production, remember to run the following command to minify the CSS:
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

Vue + 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 Vue JS project. You can do this by referring to the official Vite guide for Vue JS at https://tailwindcss.com/docs/guides/vite#vue.
Configuration File: Copy the tailwind.config.cjs file from the theme and add it to the root of your Vue 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 Vue JS project's public directory. This folder contains the necessary CSS files for the theme.
Google Font Link: In the head tag of your Vue 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 Vue JS project's resources/js/src/main.ts file, import the theme's CSS file: import '@/assets/css/app.css';
Development Mode: During development, run the following command in your Vue JS project's terminal to start the development server: npm run dev
Production Build: When you're ready to build your Vue JS project for production, run the following command: npm run build

CakePHP

The following process will be used to apply theme in your site.

Install Tailwind CSS: Ensure you have the latest version of Tailwind CSS installed by following the installation instructions provided at https://tailwindcss.com/docs/installation.
Configuration File: Copy the tailwind.config.js file from the Vristo theme and place it in the root directory of your project. This configuration file allows you to customize various aspects of the Tailwind CSS framework.
CSS Folder: Copy the css folder from webroot/assets/css of theme and add it to your project's webroot/assets directory. This folder contains the necessary CSS files for the theme.
Google Font Link: In the head tag of your project's templates/layout/default.php file, include the link to the Google Font you want to use for the theme.
```
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> 
```
Compiled CSS File: In the head tag of your templates/layout/default.php file, include the link to the compiled CSS file. This file combines the Tailwind CSS framework and the theme-specific styles.
```
<link href="assets/css/style.css" rel="stylesheet" /> 
```
Development Mode: During development, run the following command in your project's terminal to continuously watch for changes and recompile the CSS as needed:
npx tailwindcss -i webroot/assets/css/tailwind.css -o webroot/assets/css/style.css --watch
Production Mode: When you're ready to build your project for production, remember to run the following command to minify the CSS:
npx tailwindcss -i webroot/assets/css/tailwind.css -o webroot/assets/css/style.css --minify

CodeIgniter

The following process will be used to apply theme in your site.

Install Tailwind CSS: Ensure you have the latest version of Tailwind CSS installed by following the installation instructions provided at https://tailwindcss.com/docs/installation.
Configuration File: Copy the tailwind.config.js file from the Vristo theme and place it in the root directory of your project. This configuration file allows you to customize various aspects of the Tailwind CSS framework.
CSS Folder: Copy the css folder from public/assets/css of theme and add it to your project's public/assets directory. This folder contains the necessary CSS files for the theme.
Google Font Link: In the head tag of your project's app/Views/components/layout/default.php file, include the link to the Google Font you want to use for the theme.
```
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> 
```
For add custom font follow the step from Font Family.
Compiled CSS File: In the head tag of your app/Views/components/layout/default.php file, include the link to the compiled CSS file. This file combines the Tailwind CSS framework and the theme-specific styles.
```
<link rel='stylesheet' type='text/css' media='screen' href="<?php echo base_url('assets/css/style.css') ?>" /> 
```
Development Mode: During development, run the following command in your project's terminal to continuously watch for changes and recompile the CSS as needed:
npx tailwindcss -i public/assets/css/tailwind.css -o public/assets/css/style.css --watch
Production Mode: When you're ready to build your project for production, remember to run the following command to minify the CSS:
npx tailwindcss -i public/assets/css/tailwind.css -o public/assets/css/style.css --minify

Symfony

The following process will be used to apply theme in your site.

Install Tailwind CSS: Ensure you have the latest version of Tailwind CSS installed by following the installation instructions provided at https://tailwindcss.com/docs/guides/symfony.
Configuration File: Copy the tailwind.config.js file from the Vristo theme and place it in the root directory of your project. This configuration file allows you to customize various aspects of the Tailwind CSS framework.
CSS Folder: Copy the css folder from public/assets/css of theme and add it to your project's assets directory. This folder contains the necessary CSS files for the theme.
Google Font Link: In the head tag of your project's templates/components/layout/default.html.twig file, include the link to the Google Font you want to use for the theme.
```
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> 
```
Compiled CSS File: In the head tag of your templates/components/layout/default.html.twig file, include the link to the compiled CSS file. This file combines the Tailwind CSS framework and the theme-specific styles.
```
 <link rel='stylesheet' type='text/css' media='screen' href="{{ asset('assets/css/style.css') }}" /> 
```
Development Mode: During development, run the following command in your project's terminal to continuously watch for changes and recompile the CSS as needed:
npm run dev
Production Mode: When you're ready to build your project for production, remember to run the following command to minify the CSS:
npm run build

Django

The following process will be used to apply theme in your site.

Install Tailwind CSS: Ensure you have the latest version of Tailwind CSS installed by running the following command python3 -m pip install django-tailwind
Configuration File: Copy the static_src/tailwind.config.js file from the Vristo theme and place it in the static_src directory of your project. This configuration file allows you to customize various aspects of the Tailwind CSS framework.
CSS Folder: Copy the css folder from static/assets/css of theme and add it to your project's assets directory. This folder contains the necessary CSS files for the theme.
Google Font Link: In the head tag of your project's main/templates/components/layouts/default.html file, include the link to the Google Font you want to use for the theme.
```
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> 
```
Compiled CSS File: In the head tag of your main/templates/components/layouts/default.html file, include the link to the compiled CSS file. This file combines the Tailwind CSS framework and the theme-specific styles.
```
<link rel='stylesheet' type='text/css' media='screen' href="{% static 'assets/css/styles.css' %$#125;"> 
```
Development Mode: During development, run the following command in your project's terminal to continuously watch for changes and recompile the CSS as needed:
python3 manage.py tailwind start
Production Mode: When you're ready to build your project for production, remember to run the following command to minify the CSS:
python3 manage.py tailwind build

Ruby

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 project. You can do this by referring to the official guide for Ruby on Rails at https://tailwindcss.com/docs/guides/ruby-on-rails.
Configuration File: Copy the tailwind.config.js file from the Vristo theme and place it in the root directory of your project. This configuration file allows you to customize various aspects of the Tailwind CSS framework.
CSS Folder: Copy the css folder from public/assets/css of theme and add it to your project's assets directory. This folder contains the necessary CSS files for the theme.
Google Font Link: In the head tag of your project's app/views/layouts/default.html.erb file, include the link to the Google Font you want to use for the theme.
```
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> 
```
Compiled CSS File: In the head tag of your HTML file, include the link to the compiled CSS file. This file combines the Tailwind CSS framework and the theme-specific styles.
```
<link href="/assets/css/style.css" type='text/css' rel="stylesheet" /> 
```
Development Mode: During development, run the following command in your project's terminal to continuously watch for changes and recompile the CSS as needed:
npx tailwindcss -i ./public/assets/css/tailwind.css -o ./public/assets/css/style.css --watch
Production Mode: When you're ready to build your project for production, remember to run the following command to minify the CSS:
npx tailwindcss -i ./public/assets/css/tailwind.css -o ./public/assets/css/style.css --minify

Adonis

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 project. You can do this by referring to the official guide for Adonis JS at https://tailwindcss.com/docs/guides/adonisjs.
Configuration File: Copy the tailwind.config.js file from the Vristo theme and place it in the root directory of your project. This configuration file allows you to customize various aspects of the Tailwind CSS framework.
CSS Folder: Copy the css folder from resources/assets/css of theme and add it to your project's assets directory. This folder contains the necessary CSS files for the theme.
Google Font Link: In the head tag of your project's resources/views/components/layout/default.edge file, include the link to the Google Font you want to use for 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 project's resources/views/components/layout/default.edge file, import the theme's CSS file: @entryPointStyles('app')
Development Mode: During development, run the following command in your Adonis JS project's terminal to start the development server: npm run dev
Production Build: When you're ready to build your Adonis JS project for production, run the following command: npm run build