QUIQQER Tailwind CSS
====================

A QUIQQER Template to use with [TailwindCSS](https://tailwindcss.com/) framework.
This Template works with TailwindCSS up to version v0.7.4 
You can find documentations for v.0.7.4 [here - TailwindCSS documentation](https://tailwindcss-v0.netlify.app/docs/what-is-tailwind/).


Paket name:

    quiqqer/template-tailwindcss


Features
--------

- Support for TailwindCSS framework up to v0.7.4
- Responsive design
- 5 standard template layouts 
- an extra Landing Page layout (i.e. for product page)


Installation
------------

The package name is: quiqqer/template-tailwindcss


Contribute
----------


Support
-------

If you have found a bug or want to make improvements,
then you can write an e-mail to support@pcsg.de.

Developer
---------

### Install Tailwind CSS for developing

By default, the template includes the file `bin/css/style.css` generated by *TailwindCSS*.  
For developing you should install *Tailwind CSS* first (see instructions below). Make your changes in **input** CSS file `tailwind/tailwind.style.css`
or in Tailwind config file `tailwind/tailwind.config.js`. Then generate the **output** CSS file `bin/css/style.css`.
Details can be found in the official [*Tailwind CSS* manual](https://tailwindcss-v0.netlify.app//docs/installation)
#### 1. Install *Tailwind CSS* via npm

Install *Tailwind CSS* in tailwind folder in your template root directory:

```bash
npm install;
````

Or use the command from the official Tailwind CSS documentation

```bash
# Using npm
npm install tailwindcss@0.7.4 --save-dev

# Using Yarn
yarn add tailwindcss@0.7.4 --dev

```

#### 2. Use the config file and adapt it to your prefer

You can find the config file in tailwind folder (`tailwind/tailwind.config.js`) in the template root directory. 
You don't have to generate new config file unless you want to start with default tailwind config file. 
Further information about configuration you can find in the official [Tailwind CSS documentation - Configuration](https://tailwindcss-v0.netlify.app//docs/configuration).


#### 3. Add or change components and utils

If you want to change or add new components and utils, edit the tailwind style file (`tailwind/tailwind.style.css`).
You can find more information in the official [Tailwind CSS documentation - Use Tailwind in your CSS](https://tailwindcss-v0.netlify.app//docs/installation#3-use-tailwind-in-your-css).

#### 4. Generate new output css file

Every time you make changes to config file or input css file, you have to generate new out css file. 
Use the following command (starting from template root directory):

```bash
./node_modules/.bin/tailwind build ./tailwind/tailwind.style.css -c ./tailwind/tailwind.config.js -o ./bin/css/style.css
``` 


License
-------

GPL-3.0+