Cookiecutter-django: Add Tailwindcss as an option

[yrfriend]

Description

It would be great if you guys could add support for integrating Tailwindcss much like you do Bootstrap.

Rationale

Tailwindcss is huge, customizable and it's only gaining adoption while all Bootstrap sites mostly look the same.

Use case(s) / visualization(s)

Using Tailwindcss almost feels like writing inline CSS but it's much more than that.

Where this could be integrated to cookiecutter-django is you can have the django site preconfigured with tailwindcss and its options to configure the styles as well as purge any unused utility classes when deploying to production.

[demestav]

I believe crispy forms that are part of every new cookiecutter Django project use Bootstrap, though.

Having said that, I always switch to TailwindCSS when starting a new cookiecutter project, so I have the workflow pretty much implemented. @browniebroke let me know if you are interested in this, I can submit a pull request for review.

[yrfriend]

Hey @demestav

I'm going to integrate TailwindCSS into my generated project from cookie-cutter. I'm pretty inexperienced with Django so I don't know the best way for going about implementing Tailwindcss.

Mind if I ask how you implemented TailwindCSS?

[luzfcb]

The real problem is not adding Tailwindcss, but who will take on the responsibility of maintaining indefinitely the Tailwindcss integration, including reviewing pull-requests, testing, and keeping everything working properly.

I never used Tailwindcss and I still don't foresee the need to use it in the near future, because of that, my vote is -1 to add it

[browniebroke]

Same issue with me I'm afraid, Tailwind looks interesting, but I've never used it, and don't plan to do so for now.

[akashvibhute]

@demestav would you mind sharing some details about your integration of tailwindcss?
Is it with crispy-forms?
I am using the django-widget-tweaks as I found that little easier than crispy forms to directly add classes for errors etc.

[demestav]

@swimminginlove @AkashV10
Sorry for my late response. I don't have much spare time at the moment, so off the top of my head, you need to:
1) Install tailwindcss with npm
2) Add tailwind directives to project.scss (see step 2 in https://tailwindcss.com/docs/installation/)
3) Add tailwind in gulpfile const tailwindcss = require('tailwindcss')
4) Add tailwindcss() to the processCss variable (search for it in gulpfile.js). Place it first in the list.

I think this is it.

It is also a good idea to purge the css in order to remove any not needed styles. When I get some more spare time, I will make more detailed list and update.