> For the complete documentation index, see [llms.txt](https://turbotech.gitbook.io/composer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://turbotech.gitbook.io/composer/installations.md).

# Installations

Installing turbotech/turbotech-component from composer. Follow the requirement to complete installation

**Requirements**

1. [PHP](https://www.apachefriends.org/download.html) >= 7.4.0 
2. [Composer ](https://getcomposer.org/)
3. [nodejs ](https://nodejs.org/en)Recommended version: for **tailwindcss** package 

**Installation** 

You can install the package via composer:

```sh
composer require turbotech/turbotech-component
```

**Config/app.php**

Inside `providers` of `config/app.php`

```php
'providers' => [

    /*
    * Laravel Framework Service Providers...
    */
    ...
    TURBOTECH\Component\ServicesProvider::class,
]
```

**composer.json**

Inside `providers` of `composer.json`

```json
"autoload": {
    "psr-4": {
        ...
        "TURBOTECH\\Component\\": "vendor/turbotech/laravel-component/src"
    }
},
```

**If the project haven't tailwindcss package** 

Then you need to install \`tailwindcss\` package

```sh
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

**Configure your template paths**

*Add the paths to all of your template files in your `tailwind.config.js` file.*

<pre class="language-javascript"><code class="lang-javascript"><strong>/** @type {import('tailwindcss').Config} */
</strong>module.exports = {
  content: [
     "./resources/**/*.blade.php",
     "./resources/**/*.js",
     "./resources/**/*.vue",
     "./vendor/turbotech/**/src/views/*.blade.php",
     "./vendor/turbotech/**/src/views/**/*.blade.php",
     "./vendor/turbotech/**/src/views/**/**/*.blade.php",
     "./vendor/turbotech/**/src/views/**/**/**/*.blade.php",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
</code></pre>

**Add the Tailwind directives to your CSS**

Add the `@tailwind` directives for each of Tailwind’s layers to your `./resources/css/app.css` file.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

**Add Tailwind to your Laravel Mix configuration**

In your `webpack.mix.js` file, add `tailwindcss` as a PostCSS plugin.

```javascript
mix.js("resources/js/app.js", "public/js")
  .postCss("resources/css/app.css", "public/css", [
    require("tailwindcss"),
]);
```

**Start your build process**

Run your build process with `npm run watch`.

```sh
npm run watch
```