> For the complete documentation index, see [llms.txt](https://codedthemes.gitbook.io/datta/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codedthemes.gitbook.io/datta/datta-able-tailwind/quick-start.md).

# Quick Start

### Installation <a href="#installation" id="installation"></a>

Navigate to your root folder **(i.e. datta-able-tailwind)**

```
c:>cd datta-able-tailwind
```

Install packages by npm or yarn according to your preferences. Here we are using the npm package manager.

```
> npm i
```

After package installation, you can start your app by using **`Gulp`** command. This will regenerate the dist folder. You can keep this command running while making changes in the `src` folder. It will auto-apply to the `dist` folder and your browser.

```
> gulp
```

{% hint style="info" %}
If you are interested more in learning about gulp, check the below section, else you can skip it.
{% endhint %}

<details>

<summary>Gulp</summary>

#### Don't know about Gulp?

Gulp is a toolkit for automating painful or time-consuming tasks in your project development workflow, so you can stop messing around and build something easier than ever.

* Auto Minify/Uglify CSS, HTML, and JS codes
* Auto Compile SaSS file
* 3000+ Plugins

#### Gulp for **Datta Able**

Use Gulp in Datta Able for building different layouts and theme customization with lots of functional tasks like Image Optimization, SaSS compilation, etc...which useful to make the production-ready `dist/`directory

</details>

#### **Gulp Commands(task)** <a href="#gulp-commands-task" id="gulp-commands-task"></a>

**Default task**

<table><thead><tr><th width="233">Gulp Command</th><th>Description</th></tr></thead><tbody><tr><td>gulp</td><td>which build template in <code>/dist</code> directory</td></tr></tbody></table>

**Basic task**

<table><thead><tr><th width="236">Gulp Command</th><th>Description</th></tr></thead><tbody><tr><td>gulp sass</td><td>which compile .scss files from <code>/src/assets/scss</code> directory and place it into a <code>/dist/assets/css</code> directory</td></tr><tr><td>gulp imgmin</td><td>which use to optimize images from <code>/src/assets/images</code> directory and place it into a <code>/dist/assets/images</code> directory</td></tr><tr><td>gulp build-node-modules</td><td>which use to copy files from <code>/src/assets</code> directory and place it into a <code>/dist/assets</code> directory</td></tr><tr><td>gulp build-html</td><td>which uses compiling your HTML file from <code>/src/html</code> directory and place it into a <code>/dist</code> directory</td></tr><tr><td>gulp build-js</td><td>which use to build <code>.js</code> files from <code>/src/assets/js</code> directory and place it into a <code>/dist/assets/js</code> directory</td></tr><tr><td>gulp watch</td><td>It will automatically start your build process if you make any changes in HTML, scss or js files from <code>/src</code> directory and put new changes to <code>/dist</code> directory</td></tr><tr><td>gulp watch-minify</td><td>It will automatically start your build process if you make any changes in HTML, scss or js files from <code>/src</code> directory and put new changes to <code>/dist</code> directory with <strong>minify assets</strong></td></tr></tbody></table>