3 ms·

I'm absolutely loving using Tailwind for my new projects. It makes it so easy to prototype and build out nice designs. Honestly I have never felt so productive

I'm absolutely loving using Tailwind for my new projects. It makes it so easy to prototype and build out nice designs. Honestly I have never felt so productive when it comes to designing pages. There is however one thing that prevents me from using it for everything and I'm curious if anyone knows a solution for this. If I am pulling a chunk of rich text from a CMS/backend/whatever, how can I style this? I tend to use Django for my backend, so in my template files I just put in a chunk like <div class="container">{{ body }}</div>. If that chunk has h2,p, etc. none of those are getting styled. In normal css I could just define what those h2, p, etc look like under a specific class. But besides using some js magic to inject those classes, I'm at a loss.

jasim 7y ago
There is no good way to solve it using Tailwind classes alone. You could parse the markup first and add Tailwind classes before rendering them, but that is too much pain for very little reward. The best trade-off I've found is to give a unique CSS classname for the container which has user-generated content, and then style it using nested selectors. Here you can use Tailwind's @apply so you're still able to rely on Tailwind's design system.
- dinkleberg 7y ago
  Yeah I definitely considered the parsing method, but that is definitely too much work there. I didn't consider using the @apply, good idea. I'll have to give that a go, thanks!
yagodragon 7y ago
Do you have any tutorial on how to set up Django with tailwindcss (using Django templates)? I'm new to Django and somewhat confused when it comes to integrating modern front end tools.
- dinkleberg 7y ago
  Yeah so someone actually made a Django app for it: https://github.com/timonweb/django-tailwind https://github.com/timonweb/django-tailwind I've used it and it is easy to use. It will generate a base.html file for you which pulls the built css from the static directory and you can extend that in your templates.
iandinwoodie 7y ago
I solved this issue for myself last night using CSS selectors. My goal was to replicate Github Flavored Markdown styling using Tailwind on Hugo generated html. Here is the repo for the stylesheet for anyone who is interested: https://github.com/iandinwoodie/github-markdown-tailwindcss https://github.com/iandinwoodie/github-markdown-tailwindcss The generated content is wrapped in a div with the class "markdown" (defined in the repo above). So it looks like: <div class="markdown">{{ .Content }}</div> I wrapped up the stylesheet around 2AM this morning, but I plan on expanding the README and un-nesting the class (it was nested for postcss-nesting). I am just starting a personal site and it is still very much under construction, but I do have a Markdown example page publicly available that I have been using to test the styles. Here is the link in case anyone wants to take a look at the end result: https://iandinwoodie.github.io/blog/markdown-syntax-guide/ https://iandinwoodie.github.io/blog/markdown-syntax-guide/
- dinkleberg 7y ago
  Very cool, thanks for sharing the link. I think this is how I'll do it as well.
  - adamwathan 7y ago
    Creator of Tailwind here, that's exactly what I would recommend too. Here are the markdown styles for my own personal website for example: https://gist.github.com/adamwathan/d257699f16ec7cc1b002b5fb7f81f35c https://gist.github.com/adamwathan/d257699f16ec7cc1b002b5fb7...

jasim 7y ago

There is no good way to solve it using Tailwind classes alone. You could parse the markup first and add Tailwind classes before rendering them, but that is too much pain for very little reward. The best trade-off I've found is to give a unique CSS classname for the container which has user-generated content, and then style it using nested selectors. Here you can use Tailwind's @apply so you're still able to rely on Tailwind's design system.

dinkleberg 7y ago
Yeah I definitely considered the parsing method, but that is definitely too much work there. I didn't consider using the @apply, good idea. I'll have to give that a go, thanks!

yagodragon 7y ago

Do you have any tutorial on how to set up Django with tailwindcss (using Django templates)? I'm new to Django and somewhat confused when it comes to integrating modern front end tools.

dinkleberg 7y ago
Yeah so someone actually made a Django app for it: https://github.com/timonweb/django-tailwind https://github.com/timonweb/django-tailwind I've used it and it is easy to use. It will generate a base.html file for you which pulls the built css from the static directory and you can extend that in your templates.

iandinwoodie 7y ago

I solved this issue for myself last night using CSS selectors. My goal was to replicate Github Flavored Markdown styling using Tailwind on Hugo generated html. Here is the repo for the stylesheet for anyone who is interested: https://github.com/iandinwoodie/github-markdown-tailwindcss https://github.com/iandinwoodie/github-markdown-tailwindcss The generated content is wrapped in a div with the class "markdown" (defined in the repo above). So it looks like: <div class="markdown">{{ .Content }}</div> I wrapped up the stylesheet around 2AM this morning, but I plan on expanding the README and un-nesting the class (it was nested for postcss-nesting). I am just starting a personal site and it is still very much under construction, but I do have a Markdown example page publicly available that I have been using to test the styles. Here is the link in case anyone wants to take a look at the end result: https://iandinwoodie.github.io/blog/markdown-syntax-guide/ https://iandinwoodie.github.io/blog/markdown-syntax-guide/

dinkleberg 7y ago
Very cool, thanks for sharing the link. I think this is how I'll do it as well.
- adamwathan 7y ago
  Creator of Tailwind here, that's exactly what I would recommend too. Here are the markdown styles for my own personal website for example: https://gist.github.com/adamwathan/d257699f16ec7cc1b002b5fb7f81f35c https://gist.github.com/adamwathan/d257699f16ec7cc1b002b5fb7...