Tailwindcss component tags for Django Projects.
Project description
- Test Status:
- Version Info:
- Compatibility:
-
Tailwindcss component tags for Django Projects.
Description
Django template tags based on Tailwindcss, created with django-component-tags.
Tailwind is an utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Requirements
Requires Django 2.2 or newer, and is tested against Python 3.7 and PyPy.
Quick Start
Install the python package django-component-tags-tailwindcss from pip:
pip install django-component-tags-tailwindcssAdd it to INSTALLED_APPS in your settings.py:
INSTALLED_APPS = [
...
'component_tags',
'component_tags_tailwindcss',
...
]
...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 the tailwindcss_component_tags library you 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 from component_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.
Components
Link
Alert*
Breadcrumb
Button
Card
Dropdown*
Label
Modal*
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.
Examples
Here we have just a couple of examples to showcase the code. Checkout this template if 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 %}Note
This project has been set up using PyScaffold 4.0rc2. For details and usage information on PyScaffold see https://pyscaffold.org/.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
