Introduction

Toxci | SaaS & AI Startup Technology Tailwind Template

We would like to thank you for choosing Toxci | SaaS & AI Startup Technology Tailwind Template.

Getting started

Toxci is a modern Responsive Multi-Purpose Tailwind template for startup digital agencies and SEO agencies that offers design, development, Ai Startup Technology and online marketing services to its client.

Template Features

What's Included

After purchasing Toxci template on themeforest.net with your Envato account, go to your Download page. You can choose to download Toxci template package which contains the following files:

The contents of the template package downloaded from ThemeForest

1. Install Node.js & npm

Tailwind CSS requires Node.js and npm. Follow these steps:

1. Download Node.js LTS from nodejs.org and install it.
2. Check installation in terminal:
   node -v and npm -v

2. Install Project Dependencies

Open terminal in your project folder and run:

npm install

This will install Tailwind CLI and other required dependencies from package.json.

3. Run Tailwind in Watch Mode

Start Tailwind CLI in watch mode to automatically rebuild CSS on changes:

npm run dev

Changes in src/tailwind.css will automatically update assets/css/main.css.

4. Tailwind CSS File Example

Your src/tailwind.css should look like this:

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Add custom CSS below if needed */

Quick Commands Summary

• Install dependencies: npm install
• Run Tailwind watch mode: npm run dev

Template Structures

Articles

• HTML Structure
• Edit Tailwind CSS
• JavaScript Files

HTML Structure

This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into differt section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.

Edit Tailwind CSS

We are using one customed Tailwind CSS files (tailwind.css) and several src files. Tailwind CSS file structure is as follows:

JavaScript Files

There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:

Change Contents

• Changing Images
• Changing Brand Logo
• Changing Email Settings of the Contact Form

Changing Images

To change any images of the website

Example: Suppose you want to change the following image file:

You have to do the following to change this image with your own image:

Changing Brand Logo

To change any images of the website

Example: Suppose you want to change the following image file for change your logo:

Changing Colors in Tailwind

We have used Tailwind CSS for this project to write CSS. If you are familiar with Tailwind, you should customize only the tailwind.css file. Please make sure you rebuild your CSS after you have made changes in any of the Tailwind configuration files.

• Changing default template colors

Changing default template colors

Changing Email Settings of the Contact Form

Sources and Credits

• Google Fonts
• jQuery
• Isotop
• Waypoints Js
• Animate.css

Support

If you face any issue please contact us at Support Ticket. We provide 15 hours real-time support for our customers.

Thank you for purchasing our theme.