The Django templates use TailwindCSS a utility framework for styling and creating components. Styling is applied directly in your HTML to compose new components.
This project uses the Tailwind CLI
alongside postcss
without the use of an additional build tool.
The relevant configuration files are:
tailwind.config.js
- tailwind specific including plugins such as tailwindforms
postcss.config.js
- config for tailwind and postcssThe package.json
file includes the necessary scripts to build your styles during development.
"scripts": {
"watch": "npx tailwindcss --postcss -i ./assets/css/app.css -o ./static/dist/css/app.css --watch",
"build": "NODE_ENV=production npx tailwindcss --postcss -i ./assets/css/app.css -o
./static/dist/css/app.css --minify "
}
/static/css/app.css
is referenced in your project's main template i.e. base.html
.
tailwind components and utilities are included in ./assets/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
}
running npm run watch
will watch for changes in both the app.css file as well as your project html files.
the build tool/tailwind cli will then rebuild the necessary css and save it to /static/css/app.css
your Django server with then take over from this point and server the files
npm install
to install the required packages.npm run watch to build and compile
npm run build
to compile your production ready CSS. If you are deploying with docker this will be done for you.The app includes basic UI components including the following:
See examples in dashboard/ui.html
<p>Default Buttons</p>
button
button
button
button
button
<p>Light Buttons</p>
button
button
button
button
button
Breadcrumbs
<ol>
<li>
<a href="#">
Home
</a>
</li>
<li>
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Projects</a>
</div>
</li>
<li>
<div class="flex items-center">
<!-- Heroicon name: solid/chevron-right -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<a href="#" class="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700">Current</a>
</div>
</li>
</ol>
</nav>
<p>Forms Inputs</p>
<!--Toggle with label-->
<div x-data="{enabled: false}" class="flex max-w-sm p-2 items-center hover:bg-gray-200 dark:hover:bg-gray-700">
<button @click="enabled = !enabled" :class="enabled ? 'bg-indigo-600': 'bg-gray-200'" type="button" class="btn-toggle bg-gray-200" role="switch" aria-checked="false" aria-labelledby="annual-billing-label">
<span aria-hidden="true" :class="enabled ? 'translate-x-5': 'translate-x-0'" class="span-toggle translate-x-0"></span>
</button>
<span class="ml-3" id="annual-billing-label">
<span class="text-sm font-medium text-gray-900 dark:text-gray-400">Example text</span>
</span>
</div>
<!--Example-->
<div>
<label for="example" class="block text-sm font-medium text-gray-700">Example text area</label>
<div class="mt-1">
<textarea rows="4" name="example" id="comment" class="textarea"></textarea>
</div>
</div>
<!--Input -->
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<div class="mt-1">
<input type="email" name="email" id="email" placeholder="[email protected]">
</div>
<p class="mt-2 text-sm text-gray-500" id="email-description">Some other text.</p>
</div>
<!--Date -->
<div>
<label for="date" class="block text-sm font-medium text-gray-700">Date</label>
<div class="mt-1">
<input type="date" name="date" id="date" aria-describedby="date-description">
</div>
</div>
<!--Date time local-->
<div>
<label for="date" class="block text-sm font-medium text-gray-700">Datetime</label>
<div class="mt-1">
<input type="datetime-local" name="datetime" id="datetime" aria-describedby="date-description" data-form-type="date">
</div>
</div>
<fieldset class="p-2">
<legend class="sr-only">Radio Groups</legend>
<div class="space-y-5 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
<div class="flex items-center">
<input id="a" aria-describedby="a" name="plan" type="radio" checked="">
<label for="a" class="ml-3 block text-sm font-medium text-gray-700">Plan A</label>
</div>
<div class="flex items-center">
<input id="b" aria-describedby="b" name="plan" type="radio">
<label for="b" class="ml-3 block text-sm font-medium text-gray-700">Plan B</label>
</div>
</div>
</fieldset>
<!--Checkbox-->
<fieldset class="space-y-5">
<legend class="sr-only">Checkbox example</legend>
<div class="relative sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
<div class="flex items-center h-5 space-x-2">
<input id="comments" aria-describedby="comments-description" name="comments" type="checkbox">
<label for="comments" class="font-medium text-sm text-gray-700">Checkbox</label>
</div>
</div>
</fieldset>
Success
Error
Warning
Info