Package: django-component-tags-tailwindcss
Test Status:Version Info:Compatibility:Tailwindcss component tags for Django Projects.Demo 1 (Component list)Demo 2 (Modal component)DescriptionDjango template tags based onTailwindcss,
created withdjango-component-tags.Tailwindis an utility-first CSS framework packed with classes likeflex,pt-4,text-centerandrotate-90that can be composed to build any design, directly in your markup.RequirementsRequires Django 2.2 or newer, and is tested against Python 3.7 and PyPy.Quick StartInstall the python packagedjango-component-tags-tailwindcssfrom pip:pip install django-component-tags-tailwindcssAdd it toINSTALLED_APPSin yoursettings.py:INSTALLED_APPS = [
    ...
    'component_tags',
    'component_tags_tailwindcss',
    ...
]
...NoteCheck outcomponent_tagsinstructions to complete this installation.Next, create your own base template:# templates/index.html
{% load static %}
{% load tailwindcss_component_tags %}
<!DOCTYPE html>
<html lang="en">
{% block head %}
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>-----</title>
        <!-- Styles -->
        <link rel="stylesheet" href="{% static 'component_tags_tailwindcss/css/tailwind.min.css' %}">
        {% components_css %}
    </head>
{% endblock head %}
<body>
{% block content %}{% endblock content %}
<!-- Scripts -->
{% components_js %}
</body>
</html>After loading thetailwindcss_component_tags libraryyou will be able to use any of the
available components inside any template.Optional: You can use the provided base template for a quick setup fromcomponent_tags_tailwindcss/base.html:# templates/index.html
{% extends 'component_tags_tailwindcss/base.html' %}
{% load tailwindcss_component_tags %}

{% block content %}
    Content goes here...
{% endblock content %}We encourage you to make your own installation of Tailwindcss, do not use this base template on production environments.NoteCheckoutTailwindcss documentationfor more information.ComponentsLinkAlert*BreadcrumbButtonCardDropdown*LabelModal*Some components marked with*require javascript, therefore i choose AlpineJS
to make the minimal javascript logic.You can of course extend this components and implement your own javascript framework.NoteCheckoutAlpineJS documentationfor more information.ExamplesHere we have just a couple of examples to showcase the code. Checkout thistemplateif you want to get more examples.Alert# templates/index.html
{% extends 'component_tags_tailwindcss/base.html' %}
{% load tailwindcss_component_tags %}

{% block content %}
    {% alert %}Link 1{% endalert %}
    {% alert color="primary" %}Primary link{% endalert %}
    {% alert color="danger" %}Secondary Link{% endalert %}
{% endblock %}Card# templates/index.html
{% extends 'component_tags_tailwindcss/base.html' %}
{% load tailwindcss_component_tags %}

{% block content %}
    {% card %}
        {% slot 'header' %}
            <img class="w-full"
                 src="https://images.unsplash.com/photo-1593642634524-b40b5baae6bb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80"
                 alt="card-logo">
        {% endslot %}
        Card body
    {% endcard %}
{% endblock %}NoteThis project has been set up using PyScaffold 4.0rc2. For details and usage
information on PyScaffold seehttps://pyscaffold.org/.