From 138750e111351520705a3da572bc22095d55b570 Mon Sep 17 00:00:00 2001
From: Michaelyin <michaelyin@accordbox.com>
Date: Thu, 6 Jan 2022 22:28:21 +0800
Subject: [PATCH 1/2] add doc for 'Missing form style'

---
 docs/faq.txt   | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++
 docs/index.txt |  1 +
 2 files changed, 69 insertions(+)
 create mode 100644 docs/faq.txt

diff --git a/docs/faq.txt b/docs/faq.txt
new file mode 100644
index 0000000..73f481e
--- /dev/null
+++ b/docs/faq.txt
@@ -0,0 +1,68 @@
+===
+FAQ
+===
+
+Missing form style
+===================
+
+For some people who enabled Tailwind ``purge`` option. They might meet this problem on the server or local.
+
+Because Tailwind CSS can not know which CSS classes are used by ``crispy-tailwind``, so they would not be include in the final css file, which caused form style missing.
+
+This problem might also happen if you use other 3-party package who manipulate Tailwind CSS.
+
+To solve the problem, let's first update ``tailwind.config.js``
+
+.. code-block:: javascript
+
+    const Path = require("path");
+    const pwd = process.env.PWD;
+    const pySitePackages = process.env.pySitePackages;
+
+    // We can add current project paths here
+    const projectPaths = [
+      Path.join(pwd, "../django_tailwind_app/templates/**/*.html"),
+      // add js file paths if you need
+    ];
+
+    // We can add 3-party python packages here
+    let pyPackagesPaths = []
+    if (pySitePackages){
+      pyPackagesPaths = [
+        Path.join(pySitePackages, "./crispy_tailwind/**/*.html"),
+        Path.join(pySitePackages, "./crispy_tailwind/**/*.py"),
+        Path.join(pySitePackages, "./crispy_tailwind/**/*.js"),
+      ];
+    }
+
+    const purgePaths = [...projectPaths, ...pyPackagesPaths];
+    console.log(``tailwindcss purge by scanning ${purgePaths}``);
+
+    module.exports = {
+      mode: 'jit',
+      purge: purgePaths,
+      darkMode: false, // or 'media' or 'class'
+      theme: {
+        extend: {},
+      },
+      variants: {
+        extend: {},
+      },
+      plugins: [
+        require('@tailwindcss/forms'),
+      ],
+    }
+
+If we set env ``pySitePackages`` when buillding Tailwind CSS, then it can find the ``crispy_tailwind`` source code
+
+.. code-block:: shell
+
+    (env)$ python3 -c "import sysconfig; print(sysconfig.get_path('purelib'))"
+    /Users/michaelyin/django_tailwind_project/env/lib/python3.9/site-packages
+
+    # set it to pySitePackages ENV variable
+    (env)$ export pySitePackages=$(python3 -c "import sysconfig; print(sysconfig.get_path('purelib'))")
+    # check
+    (env)$ env | grep pySitePackages
+
+You can check this blog `Render Django Form with Tailwind CSS Style <https://www.accordbox.com/blog/render-django-form-with-tailwind-css-style/>`_ to learn more about this approach.
diff --git a/docs/index.txt b/docs/index.txt
index 8fd4088..9e3cfe3 100644
--- a/docs/index.txt
+++ b/docs/index.txt
@@ -18,6 +18,7 @@ This is a Tailwind template pack for django-crispy-forms_.
    getting_started
    layout_objects
    examples
+   faq
    contributing
 
 

From 2f8127d77509d2a1b9e1b1004a26b18a2fdb17e1 Mon Sep 17 00:00:00 2001
From: Michaelyin <michaelyin@accordbox.com>
Date: Tue, 11 Jan 2022 16:34:01 +0800
Subject: [PATCH 2/2] update for Tailwind v3

---
 docs/faq.txt | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/docs/faq.txt b/docs/faq.txt
index 73f481e..c53a2bb 100644
--- a/docs/faq.txt
+++ b/docs/faq.txt
@@ -5,9 +5,14 @@ FAQ
 Missing form style
 ===================
 
-For some people who enabled Tailwind ``purge`` option. They might meet this problem on the server or local.
+For people who import Tailwind CSS using ``npm``:
 
-Because Tailwind CSS can not know which CSS classes are used by ``crispy-tailwind``, so they would not be include in the final css file, which caused form style missing.
+1. Use Tailwind CSS v3, `jit` is enabled all the time
+1. Use Tailwind CSS v2, but enabled Tailwind ``jit`` option.
+
+They might meet this problem, the form styles does not look good, and some css styles are missing in the built css file.
+
+Because Tailwind CSS can not know which CSS classes are used by ``crispy-tailwind``, so they would not be included in the final css file, which caused form style missing.
 
 This problem might also happen if you use other 3-party package who manipulate Tailwind CSS.
 
@@ -17,6 +22,9 @@ To solve the problem, let's first update ``tailwind.config.js``
 
     const Path = require("path");
     const pwd = process.env.PWD;
+
+    // To make tailwind can scan code in Python packages:
+    // export pySitePackages=$(python3 -c "import sysconfig; print(sysconfig.get_path('purelib'))")
     const pySitePackages = process.env.pySitePackages;
 
     // We can add current project paths here
@@ -35,25 +43,24 @@ To solve the problem, let's first update ``tailwind.config.js``
       ];
     }
 
-    const purgePaths = [...projectPaths, ...pyPackagesPaths];
-    console.log(``tailwindcss purge by scanning ${purgePaths}``);
+    const contentPaths = [...projectPaths, ...pyPackagesPaths];
+    console.log(`tailwindcss will scan ${contentPaths}`);
 
     module.exports = {
-      mode: 'jit',
-      purge: purgePaths,
-      darkMode: false, // or 'media' or 'class'
+      content: contentPaths,
       theme: {
         extend: {},
       },
       variants: {
-        extend: {},
       },
       plugins: [
         require('@tailwindcss/forms'),
       ],
     }
 
-If we set env ``pySitePackages`` when buillding Tailwind CSS, then it can find the ``crispy_tailwind`` source code
+If we set env variable ``pySitePackages`` when building Tailwind CSS, then it can find the ``crispy_tailwind`` source code
+
+Here is an example
 
 .. code-block:: shell