Prerequisites
Before starting the project make sure to install the following utilities:
Creating a new Django application
Let's create a fresh Django application so that we can go through all the steps together.
Step 1
Add Python virtual environment.
mkdir my-project
cd my-project
py -3 -m venv venv
mkdir my-project
cd my-project
python -3 -m venv venv
Step 2
Now activate created environment. In case that you are working on Windows
and command is not working, try this:
source ./venv/Scripts/activate. After this you should see venv
catalogue and in your terminal will be visible (venv) badge.
venv/Scripts/activate
. venv/bin/activate
Step 3
Install Django.
pip install django
Step 4
Create a project.
django-admin startproject mysite
Step 5
Go to settings.py file in mysite folder and modify
section with paths for static files.
TE_URL = 'node_modules/'
STATICFILES_DIRS = [
BASE_DIR / "static",
BASE_DIR.parent / "node_modules",
]
Installing and configuring Tailwind CSS and Tailwind Elements
Step 1
Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 2
Add the paths to all of your template files in your
tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,js}",
"./node_modules/tw-elements/dist/js/**/*.js",
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [require("tw-elements/dist/plugin.cjs")],
};
Step 3
Create an static folder in root directory and
input.css file. Then add the @tailwind directives
for each of Tailwind’s layers.
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 4
Start the Tailwind CLI build process. Run the CLI tool to scan your template files for classes and build your CSS.
npx tailwindcss -i input.css -o static/output.css --watch
Step 5
In root directory create a pages folder and place in there
home.html file. At the top (first line) should be found
{% load static %} phrase which allows to contains static files.
At the end of head section place link for Tailwind CSS file.
<link href="{% static 'output.css' %}" rel="stylesheet" />
Step 6
In home.html file, at the end of body link script
for Tailwind Elements JS file.
<script
src="{% static 'tw-elements/dist/js/tw-elements.umd.min.js' %}"
type="text/javascript"></script>
Step 7
Attach the Roboto font in home.html.
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap"
rel="stylesheet" />
Step 8
Create views.py file in mysite folder and put in
there render for your first / home page.
from django.shortcuts import render
def home_view(request):
return render(request, "pages/home.html", {})
Step 9
Then in urls.py file (located in mysite folder)
add import newly created views.py file and attach urls for
paths with static files.
from django.conf import settings
...
from . import views
urlpatterns = [
path("", views.home_view),
path('admin/', admin.site.urls),
]
if settings.DEBUG:
from django.conf.urls.static import static
urlpatterns += static(settings.STATIC_URL,
document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.TE_URL,
document_root=settings.STATIC_ROOT)
Initializing via JS
By default all components have autoinit which means they are initialized by data attributes. But if you want to make init by JavaScript - there is also possibility to do that.
Step 1
Initialize components in script section.
const myInput = new te.Input(document.getElementById("myDatepicker"));
const options = {
format: "dd-mm-yyyy",
};
const myDatepicker = new te.Datepicker(
document.getElementById("myDatepicker"),
options
);