Tailwind CSS 2.x

anjanesh

I wonder what you did for using tailwind CSS 2.x in the new revamped site.

Unlike others like Bootstrap and Tailwind CSS 1.x which can easily be included by CDN and can launch a page asap, Tailwind CSS 2.x requires additional work when not possible using CDN like when using forms.

  // tailwind.config.js
  module.exports = {
    // ...
    plugins: [
      // ...
      require('@tailwindcss/forms'),
    ]
  }

The first 2 ways of getting it setup is a tedious task : https://tailwindcss.com/docs/installation
I mean, for Django site, how difficult is it to include Tailwind CSS 2.x ?
Is there some stripped down version of a doc that explains how to include Tailwind CSS 2.x with form styles etc ? I am not overriding the styles.

sean

anjanesh on our setup we're just running the build with output going to a CSS file in our Django theme assets, eg:

npx tailwindcss-cli@latest build ./tailwind.css -o ../path/to/tailwind.css

Here's a Django example that doesn't seem too tedious: Using Tailwind CSS With Django 3.X

It looks like there might even be a Django package that you can bolt on to add Tailwind to your project: django-tailwind

anjanesh

Where do we have to do :

npm init -y
npm install tailwindcss autoprefixer cssnano postcss postcss-cli

In the Django project's root folder ?

Say the project name is project1

And where should the static folder be ? <root>/project1/static/project1 ?

<root>
├── db.sqlite3
├── manage.py
├── requirements.txt
├── project1
    ├── __init__.py
    ├── apps.py
    ├── views.py
    ├── models.py
    └── templates/
        └── project1
            └── index.html

sean

anjanesh don't let the complexity of the Tailwind stuff throw you off. In the end, it's just another CSS asset.

Our own setup is a bit complex but it boils down to this:

├── django project directory
├── tailwind project directory
├── static asset directory

We manage the Tailwind project (ie run npm etc) in its own directory, and when we build Tailwind we output the file to a static directory for the dashboard app within the Django project directory.

When we run "collectstatic" for the Django project, the Tailwind CSS is copied over to the static asset directory with everything else.

anjanesh

sean We manage the Tailwind project (ie run npm etc) in its own directory, and when we build Tailwind we output the file to a static directory for the dashboard app within the Django project directory.

This works for me - tried this out on a new upcoming Django 4 + TailWind CSS 3 project. Thanks.

npx tailwindcss -i ./src/styles.css -o ../myproject/myApp/static/styles.css

anjanesh

This is nice - I will give it a try in my next Django project though.

Bootstrap is popular because of its simplicity.
TailWind's CSS is not the complex part - it's just the base setup.
AlpineJS too is superb with directly linking to the CDN. But I don't know if npm is required for AlpineJS plugins.

anjanesh

Wondering if this is any better than downloading tailwindcss's dependencies into node_module ?
https://tailwindcss.com/docs/installation#using-tailwind-cli - This can work directly with no node_modules and can write custom CSS. Came across this by visiting this tutorial.