Application UI & TailwindCSS

The Django templates use TailwindCSS a utility framework for styling and creating components. Styling is applied directly in your HTML to compose new components.

Configuration

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 postcss

The 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 "
  }

How it works

The workflow during development:

/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

Docker for local development

If using docker there are no additional steps necessary.
When you bring the stack up it also starts a node container which will build your styles and watch for any changes during development.

Development without docker

You will need to run npm install to install the required packages.
During development run npm run watch to build and compile

The workflow before deploying to production:

before deploying to production, run npm run build to compile your production ready CSS. If you are deploying with docker this will be done for you.

Application UI

The app includes basic UI components including the following:

buttons
breadcrumbs
form inputs

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>

Django Templates Modern Javascript

Blog

Pricing

docs