QUIQQER Tailwind CSS

A QUIQQER Template to use with TailwindCSS framework. This Template works with TailwindCSS up to version v0.7.4 You can find documentations for v.0.7.4 here - TailwindCSS documentation.

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

1. Install Tailwind CSS via npm

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

npm install;

Or use the command from the official Tailwind CSS documentation

# 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.

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.

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):

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

License

GPL-3.0+