Techwind - Documentation V3.1.0

Introduction

Techwind is a Powerful App, Saas & Software Vue 3 Multipurpose Landing & Admin Dashboard Template. It is a beautifully handcrafted, pixel-perfect landing page template based on the Vue 3.x, and Tailwind CSS v4.x. It is an excellent template for startups, cloud hosting, business, corporate, minimal portfolio single products (Smartwatch), Saas, Social media marketing, Digital marketing/agency, Email Templates, Marketing, Agency, Careers and Jobs, Help center, and more. It is 100% responsive and looks stunning on all screens and devices. Users will love your site because it gives them a unique user experience (UX), and a clean, modern & beautiful design. They are also easy to customize and combine with other components.

Dark Theme: We have added Dark theme

RTL Theme: We have added RTL theme

Please feel free to get back to me in case if you are having any question or feedback.

Setup VueJs

Introduction

We are using npm which allows having complete automation for build flow. Please follow below steps to install and setup all prerequisites:

Prerequisites

Please follow below steps to install and setup all prerequisites:

Nodejs

Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 18.
Git

Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.

Installation

To setup the template or theme, follow below-mentioned steps:

Install Prerequisites

Make sure to have all above prerequisites installed & running on your computer

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:

Command	Description
`npm i`	This would install all the required dependencies in the `node_modules` folder.
`npm run serve`	Runs the project locally, starts the development server and watches for any changes in your code. The development server is accessible at http://localhost:8080.
`npm run build`	Generates a `/build or dist` directory with all the production files.

Folder & File Structure

Techwind_VueJs_v3.1.0
│
├──  Documentation   
├──  Techwind_VueJs
	│
	├──  Landing
	└──  Dashboard

Landing
│
├──  public folder
    ├──  src folder
    │   └──  assets
    │       └──  fonts
    │           └──  all fonts are here (materialdesignicons)
    │       └──  images
    │           └──  all template images are here
    │       └──  scss
    │           └──  all scss files are here 
    │   
    │   └──  components
    │       └──  All components are here, like about, blog, navbar, features, pricing, etc.
    │   
    │   └──  pages
    │       └──  index.vue
    │       └──  index-saas.vue
    │       └──  all pages
    │   
    │   └──  router
    │       └──  all pages imports and router are here
    │   
    │   └──  App.vue
    │   └──  main.js
    │
    └──  vue.config.json
    └──  vite.config.json
    └──  babel.config.json
    └──  postcss.config.js
    └──  jsconfig.json
    └──  package.json

Dashboard
│
├──  public folder
    ├──  src folder
    │   └──  assets
    │       └──  fonts
    │           └──  all fonts are here (materialdesignicons)
    │       └──  images
    │           └──  all template images are here
    │       └──  scss
    │           └──  all scss files are here 
    │   
    │   └──  components
    │       └──  All components are here, like about, blog, navbar, features, pricing, etc.
    │   
    │   └──  pages
    │       └──  index.vue
    │       └──  all pages
    │   
    │   └──  router
    │       └──  all pages imports and router are here
    │   
    │   └──  App.vue
    │   └──  main.js
    │
    └──  vue.config.json
    └──  vite.config.json
    └──  babel.config.json
    └──  postcss.config.js
    └──  jsconfig.json
    └──  package.json

How to change the color in Techwind?

First of all open tailwind.css (path: HTML/src/assets/css/tailwind.css) and replace or change color code --color-primary: #4f39f6;
Theme primary color --color-primary: #4f39f6;

How to change the fonts family in Techwind?

First of all open tailwind.css (path: HTML/src/assets/css/tailwind.css)
and add your font family
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
Import the @import link from your Google Fonts.

And then please open the tailwind.css and please create your google fonts name in the module.exports > theme > fontFamily

For example:
--font-nunito: "Nunito", "serif";
add your Google fonts like the above example.

Please refer this below link for font-family: https://tailwindcss.com/docs/font-family#customizing-your-theme

And then you can use it directly as a class like font-nunito

Plugins

Here is the list of plugin which used in Techwind Vue:

Plugin	Version
vue	3.5.21 Updated
tailwindcss	4.1.13 Updated
vue-router	4.5.1 Updated
vue-countup-v3	1.4.2
vue-easy-lightbox	1.19.0
vue-mapbox-ts	0.9.10
vue-tradingview-widgets	1.2.4
vue3-apexcharts	1.8.0 Updated
vue3-google-map	0.24.0 Updated
@tailwindcss/cli	4.1.13 Updated
feather-icons	4.29.2 Updated
vue3-smooth-scroll	0.8.1
@babel/core	7.12.16
@babel/eslint-parser	7.12.16
@vue/cli-plugin-babel	5.0.0
@vue/cli-plugin-eslint	5.0.0
@vue/cli-service	5.0.0
autoprefixer	10.4.19
eslint	7.32.0
eslint-plugin-vue	8.0.3
postcss	8.4.38
@ckeditor/ckeditor5-build-classic	44.3.0
@ckeditor/ckeditor5-vue	7.0.0
@fullcalendar/core	6.1.19 Updated
@fullcalendar/daygrid	6.1.19 Updated
@fullcalendar/interaction	6.1.19 Updated
@fullcalendar/timegrid	6.1.19 Updated
@fullcalendar/vue3	6.1.19 Updated
simplebar	6.3.2 Updated
tiny-slider	2.9.4
tradingview-widget	0.0.1
@vuepic/vue-datepicker	11.0.2 Updated
jarallax	2.2.1
Swiper	11.1.10 Updated
vue-masonry-gallery-new	1.1.1
vue-select	4.0.0-beta.6
vue-typewriter-effect	1.0.1
vue3-smooth-scroll	0.8.1

Supports

Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.

Stay awesome

- Shreethemes

Changelog

Version v3.1.0 - 8th September 2025

Landing:
Update: Updated the vue v3.5.21
Update: Updated the Tailwind CSS Version v4.1.13
Update: Updated the @tailwindcss/cli v4.1.13
Update: Updated the vue-router v4.5.1
Update: Updated the feather-icons v4.29.2
Update: Updated the swiper js v11.2.10
Update: Updated the Navbar Font size issues
Update: Updated color indigo-600 to primary
Note: We have changed the color indigo-600 to the primary color. You can change your primary theme color by using the primary color code.
Admin Dashboard:
Update: Updated the vue v3.5.21
Update: Updated the Tailwind CSS Version v4.1.13
Update: Updated the @tailwindcss/cli v4.1.13
Update: Updated the vue-router v4.5.1
Update: Updated the feather-icons v4.29.2
Update: Updated the vue3-apexcharts v1.8.0
Update: Updated the vue3-google-map v0.24.0
Update: Updated the simplebar v6.3.2
Update: Updated the @vuepic/vue-datepicker v11.0.2
Update: Updated the fullcalendar v6.1.19
Update: Updated color indigo-600 to primary
Note: We have changed the color indigo-600 to the primary color. You can change your primary theme color by using the primary color code.

Version 3.0.0 - 25th March 2025

Landing:
Add : Added new Solar / Renewable Energy (index-solar) demo
Update: Updated the Tailwind CSS v4.0.13
Update: Updated the Vue Countup v1.4.2
Update: Updated the Swiper Version v11.1.5
Update: Updated and convert in to Composition API Style
Update: Updated the form-input css
Update: Updated the checkbox & radio button as per tailwindcss
Update: Updated the shadow to shadow-sm class as per tailwind css
Update: Updated the border class as per tailwind css
Admin Dashboard:
Update: Updated the Tailwind CSS v4.0.13
Update: Updated the Ckeditor5-build-classic v44.3.0
Update: Updated the Vue Simplebar v6.3.0
Update: Updated and convert in to Composition API Style
Update: Updated the form-input css
Update: Updated the checkbox & radio button as per tailwindcss
Update: Updated the shadow to shadow-sm class as per tailwind css
Update: Updated the border class as per tailwind css

Version 2.3.0 - 9th September 2024

Landing:
Add : Added new Web Programming (index-web-programming) demo
Add : Added new Index Cleaner (index-cleaner) demo
Add : Added new Page Service Detail (page-service-detail) demo
Update: Updated the Vue Version 3.5.3
Update: Updated the Vue Router Version 4.4.3
Update: Updated the Vue Countup 1.4.2
Update: Updated the Vue Datepicker Version 8.8.1
Update: Updated the Vue Jarallax Version 2.2.1
Update: Updated the Swiper Version 11.1.12
Update: Updated the Tailwind Css 3.4.10
Admin Dashboard:
Add : Added new Index Ecommerce (index-ecommerce) demo
Update: Updated the Vue Version 3.5.3
Update: Updated the Vue Router Version 4.4.3
Update: Updated the Ckeditor5-build-classic 43.1.0
Update: Updated the Vue Ckeditor5-vue 7.0.0
Update: Updated the Vue Fullcalendar 6.1.15
Update: Updated the Vue Simplebar 6.2.7
Update: Updated the Vue Countup 1.4.2
Update: Updated the Vue3 Apexcharts 1.6.0
Update: Updated the Tailwind Css 3.4.10

Version v1.0 - 23rd April 2024

Initial Released

Techwind - Vue Js Saas & Software Landing & Admin Dashboard Template

Introduction

Setup VueJs

Introduction

Prerequisites

Nodejs

Git

Installation

Install Prerequisites

Folder & File Structure

How to change the color in Techwind?

How to change the fonts family in Techwind?

Plugins

Supports

- Shreethemes

Changelog

Download Now