AlertWind make popups easy and beautiful with TailwindCss
Generator/js Alert library

Before you start make sure you link the

AlertWind Js

file in your html, once this you can call the awd function.

This project is still under development, we keep improving it and adding new features, meanwhile you can download the small AlertWind Js file and try simple and small alerts with TailwindCss

Simple Alerts

Code

                          
                            awd('AlertWind')

Alerts with title and text

Code

                          
                            awd({text:'AlertWind',title:'title-AlertWind'})

Simple Alerts info,success and warning

Code

                          
                            awd('success-text','success')
                            awd('warning-text','warning')

Alerts position

Code

                          
                            awd('top-left','','top-left')
                            awd('top-right','','top-right')
                            awd('bottom-left','','bottom-left')
                            awd('bottom-right','','bottom-right')

Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not the best choice for production.

Add the Play CDN script to your HTML

Add the Play CDN script tag to the <head> of your HTML file, and start using Tailwind’s utility classes to style your content.

index.html

<!doctype html>
                    <html>
                    <head>
                      <meta charset="UTF-8">
                      <meta name="viewport" content="width=device-width, initial-scale=1.0">
                      <script src="https://cdn.tailwindcss.com"></script>
                    </head>
                    <body>
                      <h1 class="text-3xl font-bold underline">
                        Hello world!
                      </h1>
                    </body>
                    </html>

Try customizing your config

Edit the tailwind.config object to customize your configuration with your own design tokens.

index.html

<!doctype html>
        <html>
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="https://cdn.tailwindcss.com"></script>
          <script>
            tailwind.config = {
              theme: {
                extend: {
                  colors: {
                    clifford: '#da373d',
                  }
                }
              }
            }
          </script>
        </head>
        <body>
          <h1 class="text-3xl font-bold underline text-clifford">
            Hello world!
          </h1>
        </body>
        </html>

Try adding some custom CSS

Use type="text/tailwindcss" to add custom CSS that supports all of Tailwind's CSS features.

index.html

<!doctype html>
        <html>
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="https://cdn.tailwindcss.com"></script>
          <style type="text/tailwindcss">
            @layer utilities {
              .content-auto {
                content-visibility: auto;
              }
            }
          </style>
        </head>
        <body>
          <div class="lg:content-auto">
            <!-- ... -->
          </div>
        </body>
        </html>

Try using a first-party plugin

Enable first-party plugins, like forms and typography, using the plugins query parameter.

index.html

<!doctype html>
        <html>
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
        </head>
        <body>
          <div class="prose">
            <!-- ... -->
          </div>
        </body>
        </html>

AlertWind make popups easy and beautiful with TailwindCss Generator/js Alert library

Simple Alerts

Alerts with title and text

Simple Alerts info,success and warning

Alerts position

Play CDN

Add the Play CDN script to your HTML

Try customizing your config

Try adding some custom CSS

Try using a first-party plugin

AlertWind make popups easy and beautiful with TailwindCss
Generator/js Alert library