Add possibility of overriding the tailwind.config.js

[alecslupu]

🎩 What? Why?

At the europeean commission we need to add some customization in the font face and other elements, and, for that would be ok to add them in Tailwind . For instance, several things that we need to override :

• Adjust font sizes
• Add a new font family
• Change some paddings

📌 Related Issues

Link your PR to an issue

• Related to N/A

Testing

1. Create a development application
2. create a file named config/tailwind.config.js.erb following the template
3. Edit the newly created file ( ex change Font sizes )
4. See the generated tailwind config contains the values customized

♥️ Thank you!

[microstudi]

This is very good, it should be documented!

[andreslucena]

This is very good, it should be documented!

I was just searching for the correct file to propose... Probably this is the right place: https://github.com/decidim/decidim/blob/develop/docs/modules/customize/pages/styles.adoc - a new section that says "Tailwind" just after "Webpacker". A good starting point is the instruction from the "Testing" section of this same PR.

Can you do that @alecslupu ?

[alecslupu]

This is very good, it should be documented!

I was just searching for the correct file to propose... Probably this is the right place: https://github.com/decidim/decidim/blob/develop/docs/modules/customize/pages/styles.adoc - a new section that says "Tailwind" just after "Webpacker". A good starting point is the instruction from the "Testing" section of this same PR.

Can you do that @alecslupu ?

yes, can be done.

[alecslupu]

This is very good, it should be documented!

I was just searching for the correct file to propose... Probably this is the right place: https://github.com/decidim/decidim/blob/develop/docs/modules/customize/pages/styles.adoc - a new section that says "Tailwind" just after "Webpacker". A good starting point is the instruction from the "Testing" section of this same PR.
Can you do that @alecslupu ?

yes, can be done.

@andreslucena the few lines have been added a s documentation. Can you have a look and suggest what other information we could add there ?

[andreslucena]

Just tried it locally and it works perfect!

I'd want to make this discoverable, and also to prevent people from changing directly the tailwind.config.js (that's how I thought this should be done!), so how about adding a header in the template?

diff --git a/decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb b/decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb
index 6014d388d9..c67b873259 100644
--- a/decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb
+++ b/decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb
@@ -1,3 +1,10 @@
+// This file is automatically generated.
+// Do not edit this file, it will be overwritten
+//
+// If you want to modify it, follow instructions from
+// https://docs.decidim.org/en/develop/customize/styles
+//
+
 const { inherit, current, transparent, white } = require("tailwindcss/colors")
 
 const withOpacity =

[alecslupu]

Just tried it locally and it works perfect!

I'd want to make this discoverable, and also to prevent people from changing directly the tailwind.config.js (that's how I thought this should be done!), so how about adding a header in the template?

diff --git a/decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb b/decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb
index 6014d388d9..c67b873259 100644
--- a/decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb
+++ b/decidim-core/lib/decidim/assets/tailwind/tailwind.config.js.erb
@@ -1,3 +1,10 @@
+// This file is automatically generated.
+// Do not edit this file, it will be overwritten
+//
+// If you want to modify it, follow instructions from
+// https://docs.decidim.org/en/develop/customize/styles
+//
+
 const { inherit, current, transparent, white } = require("tailwindcss/colors")
 
 const withOpacity =

@andreslucena this is ready for another round. The change was applied in 0f2b0c6

[andreslucena]

👍🏽

[alecslupu]

Merging as per @andreslucena 's approval.