Introduction to APP.

​ A template for your next documentation. Tailwind CSS V2 and Alpine.js

1.- Code

1.1.- Display code by embeding a gist from directly from GitHub Gist.

​ Gist is an easy method to share snippets or excerpts of data with others. A gist can be a string of code, a bash script or some other small piece of data. These bits of information are hosted by GitHub as a repository. ... Not only are gists free to create and store on GitHub, but they are also easy to create

* A small text about the Gist.

1.2.- Display code without using pre and code tags.

A gray brackground and black text will help displaying text, if you want more, you can use Highlight.js.

#Using npm npm install tailwindcss

#Using Yarn yarn add tailwindcss

2 Buttons.

2.1.- Simple Buttons.

​ Buttons with only text, hover and focus effect.

2.2.- Accent buttons.

​ Buttons for success, warning and danger.

2.2.- Buttons with icons.

​ Buttons with only text, hover and focus effect. This Buttonsincludes icons on the right side.

2.3.- Tags.

2.4.- Pagination

3.- Notes

3.1.- Callouts.

Info

If any Environment Variables values are changed between Deployments, deduplication will always be bypassed.

Tip

The message attached to the commit the deployment was triggered

Warning

Secret Environment Variables can't be used with the Development

Danger

This action will queue the removal of all your account's data, including: Deployments, Activity, Aliases, Domains, Certificates and your Billing subscription.

3.2.- Alert.

If any Environment Variables values are changed between Deployments.
The message attached to the commit the deployment was triggered.
Secret Environment Variables can't be used with the Development.
This action will queue the removal of all your account's data.

4.- List

Ways to write a list with Tailwind CSS.

4.1.- Unordered List:

  • Headless CMS
  • Databases
  • Cron Jobs

4.2.- Decimal List:

  • Headless CMS
  • Databases
  • Cron Jobs

5.- Table

5.1.- Stripped

lan Speed Storage Price
Start 5 Mb/s 15 GB Free
Pro 25 Mb/s 25 GB $24
Business 36 Mb/s 40 GB $50
Exclusive 48 Mb/s 120 GB $72

6.- Images

6.1.- Side to side.

gallery
gallery

6.2.- Full width

gallery
gallery

6.3.- Different Sizes

gallery
gallery
gallery

6.4.- With text on the side

You may modify the resources according to your requirements and use them royalty free in any or all of your personal and commercial projects. For example, you may use this resource for a client.

7.- Section block

7.1.- Installation.

​ Installing Tailwind CSS can be a slightly different process depending on what other frameworks/tools you're using, so we've put together a bunch of guides that cover popular setups.

7.2.- Installing Tailwind CSS as a PostCSS plugin .

​ For most real-world projects, we recommend installing Tailwind as a PostCSS plugin. Most modern frameworks use PostCSS under the hood already, and there's a good chance you've used or are currently using other PostCSS plugins like autoprefixer. If you've never heard of PostCSS or are wondering how it's different from tools like Sass, read our guide on using PostCSS as your preprocessor for an introduction. If this is a bit over your head and you'd like to try Tailwind without configuring PostCSS, read our instructions on using Tailwind without PostCSS instead.