This is a template for a simple marketing or informational website. It includes a large callout called a
+ jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
+{% javascript_pack 'app' %}
+
```
-1. Here we use `Tailwind CDN` to help user to do quick test, please remove it later.
-2. We `load webpack_loader` at the top of the template
-3. We can still use `static` tag to import image from the frontend project.
-4. We use `stylesheet_pack` and `javascript_pack` to load CSS and JS bundle files to Django
+1. We `load webpack_loader` at the top of the template
+2. We can still use `static` tag to import image from the frontend project.
+3. We use `stylesheet_pack` and `javascript_pack` to load CSS and JS bundle files to Django
!!! note
1. When your javascript and css files grow bigger and bigger, code splitting would be done automatically by Webpack.
@@ -220,6 +231,9 @@ Add `index.html` to the above `example/templates`
## Manual Test
```bash
+# restart webpack to let Tailwind auto scan
+$ npm run watch
+
$ python manage.py migrate
$ python manage.py runserver
```
@@ -233,7 +247,38 @@ dom ready
jumbotron.js:8 Jumbotron initialized for node: [object HTMLDivElement]
```
-The source code can also be found in the [Examples](https://github.com/AccordBox/python-webpack-boilerplate/tree/master/examples/)
+## Explicitly Specify Source Files
+
+Even Tailwind 4 can AUTO scan all project files in the project directory, we still recommend to explicitly specify the source files to improve performance.
+
+Below is an example of `frontend/src/styles/index.css`
+
+```css
+/*import tailwindcss and disable automatic source detection*/
+@import "tailwindcss" source(none);
+
+/*register frontend directory*/
+@source "../";
+
+/*register django templates*/
+@source "../../../django_tailwind_app/**/*.html";
+
+.jumbotron {
+ /*should be relative path of the entry css file*/
+ background-image: url("../../vendors/images/sample.jpg");
+ background-size: cover;
+}
+
+@layer components{
+ .btn-blue {
+ @apply inline-flex items-center;
+ @apply px-4 py-2;
+ @apply font-semibold rounded-lg shadow-md;
+ @apply text-white bg-blue-500;
+ @apply hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/50;
+ }
+}
+```
## Live Reload
diff --git a/docs/setup_with_tailwind.md b/docs/setup_with_tailwind.md
index e81a524..70bdb54 100644
--- a/docs/setup_with_tailwind.md
+++ b/docs/setup_with_tailwind.md
@@ -1,175 +1,69 @@
-# Tailwind CSS
+# Tailwind CSS V4
-This guide will help you install and config `Tailwind v3`
-
-## Install Dependency
-
-In directory which contains the `package.json`, install `tailwindcss` and `postcss-import`
+From `python-webpack-boilerplate>=1.0.4`, we can choose `tailwind` as the style solution when creating the frontend project.
```bash
-$ npm install -D tailwindcss@latest postcss-import
+(venv) python manage.py webpack_init
+ [1/3] project_slug (frontend):
+ [2/3] run_npm_command_at_root (y):
+ [3/3] Select style_solution
+ 1 - tailwind
+ 2 - bootstrap
+ 3 - scss
+ Choose from [1/2/3] (1): 1
+ [SUCCESS]: Frontend app 'frontend' has been created. To know more, check https://python-webpack-boilerplate.rtfd.io/en/latest/frontend/
```
-Once done, update `postcss.config.js`
+Just choose `tailwind` as the style_solution, the Tailwind V4 will be ready for you.
-```
-// https://tailwindcss.com/docs/using-with-preprocessors
-
-module.exports = {
- plugins: [
- require('postcss-import'),
- require('tailwindcss/nesting')(require('postcss-nesting')),
- require('tailwindcss'),
- require('postcss-preset-env')({
- features: { 'nesting-rules': false }
- }),
- ]
-};
-```
+## Install Dependency
-Next, generate a config file for your project using the Tailwind CLI utility included when you install the `tailwindcss` npm package
+In directory which contains the `package.json`
```bash
-$ npx tailwindcss init
+# install dependency packages
+$ npm install
+# run webpack in watch mode
+$ npm run watch
```
-Now `tailwind.config.js` is generated
-
-```js
-module.exports = {
- content: [],
- theme: {
- extend: {},
- },
- plugins: [],
-}
-```
-
-!!! note
-
- Please make sure `tailwind.config.js` exists in the same directory as `postcss.config.js`
-
-## JIT
-
-From Tailwind V3, it enabled `JIT` (Just-in-Time) all the time.
-
-> Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, then generating all of the corresponding CSS for those styles.
-
-> In order for Tailwind to generate all of the CSS you need, it needs to know about every single file in your project that contains any Tailwind class names.
-
-So we should config `content` section of the `tailwind.config.js`, then Tailwind will know which css classes are used.
-
-Let's update *frontend/tailwind.config.js*
-
-```js
-const Path = require("path");
-const pwd = process.env.PWD;
-
-// We can add current project paths here
-const projectPaths = [
- Path.join(pwd, "../example/templates/**/*.html"),
- // add js file paths if you need
-];
-
-const contentPaths = [...projectPaths];
-console.log(`tailwindcss will scan ${contentPaths}`);
-
-module.exports = {
- content: contentPaths,
- theme: {
- extend: {},
- },
- plugins: [],
-}
-```
+## Explicitly Specify Source Files
-Notes:
+Even Tailwind 4 can AUTO scan all project files in the project directory, we still recommend to explicitly specify the source files to improve performance.
-1. Here we add Django templates path to the `projectPaths`
-1. And then we pass the `contentPaths` to the `content`
-1. The final built css file will contain css classes used in the Django templates
+Below is an example
-## Import Tailwind CSS
+```css
+/*import tailwindcss and disable automatic source detection*/
+@import "tailwindcss" source(none);
-Update *src/styles/index.scss*
+/*register frontend directory*/
+@source "../";
-```scss
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+/*register django templates*/
+@source "../../../django_tailwind_app/**/*.html";
.jumbotron {
- // should be relative path of the entry scss file
- background-image: url("../../vendors/images/sample.jpg");
- background-size: cover;
+ /*should be relative path of the entry css file*/
+ background-image: url("../../vendors/images/sample.jpg");
+ background-size: cover;
}
-.btn-blue {
- @apply inline-block px-4 py-2;
- @apply font-semibold rounded-lg shadow-md;
- @apply bg-blue-500 text-white;
- @apply hover:bg-blue-700 focus:outline-none;
- @apply focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
+@layer components{
+ .btn-blue {
+ @apply inline-flex items-center;
+ @apply px-4 py-2;
+ @apply font-semibold rounded-lg shadow-md;
+ @apply text-white bg-blue-500;
+ @apply hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/50;
+ }
}
```
-```
-$ npm run start
-
-tailwindcss will scan django_basic/example/templates/**/*.html
-```
-
-Edit Django template `templates/index.html`
-
-```html hl_lines="8 28"
-{% load webpack_loader static %}
-
-
-
-
-
- Index
- {% stylesheet_pack 'app' %}
-
-
-
-
-
-
Hello, world!
-
-
This is a template for a simple marketing or informational website. It includes a large callout called a
- jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
-
-{% javascript_pack 'app' %}
-
-
-
-```
-
-```bash
-$ python manage.py runserver
-```
-
-
-
## Live Reload
-When you add Tailwind css class in Django template, it would be cool if the page can `auto live realod`, please check link below
-
[Live Reload Support](live_reload.md)
-## Tutorials
-
-To learn more about Tailwind and Django, you can check
+## Tailwind V3
-1. [Django Tailwind CSS Alpine.js Tutorial](https://www.accordbox.com/blog/django-tailwind-css-alpinejs-tutorial/)
-2. [wagtail-tailwind-blog](https://github.com/AccordBox/wagtail-tailwind-blog)
+If you still want to install Tailwind V3, please check [Tailwind CSS V3](setup_with_tailwind3.md)
diff --git a/docs/setup_with_tailwind3.md b/docs/setup_with_tailwind3.md
new file mode 100644
index 0000000..7860f9b
--- /dev/null
+++ b/docs/setup_with_tailwind3.md
@@ -0,0 +1,178 @@
+# Tailwind CSS V3
+
+This guide will help you install and config `Tailwind v3`
+
+!!! note
+ For `python-webpack-boilerplate>=1.0.4`, should choose style solution `scss` when creating the frontend project, and then you can follow this doc
+
+## Install Dependency
+
+In directory which contains the `package.json`, install `tailwindcss` and `postcss-import`
+
+```bash
+$ npm install -D tailwindcss@3.4.17 postcss-import
+```
+
+Once done, update `postcss.config.js`
+
+```
+// https://tailwindcss.com/docs/using-with-preprocessors
+
+module.exports = {
+ plugins: [
+ require('postcss-import'),
+ require('tailwindcss/nesting')(require('postcss-nesting')),
+ require('tailwindcss'),
+ require('postcss-preset-env')({
+ features: { 'nesting-rules': false }
+ }),
+ ]
+};
+```
+
+Next, generate a config file for your project using the Tailwind CLI utility included when you install the `tailwindcss` npm package
+
+```bash
+$ npx tailwindcss init
+```
+
+Now `tailwind.config.js` is generated
+
+```js
+module.exports = {
+ content: [],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
+```
+
+!!! note
+
+ Please make sure `tailwind.config.js` exists in the same directory as `postcss.config.js`
+
+## JIT
+
+From Tailwind V3, it enabled `JIT` (Just-in-Time) all the time.
+
+> Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, then generating all of the corresponding CSS for those styles.
+
+> In order for Tailwind to generate all of the CSS you need, it needs to know about every single file in your project that contains any Tailwind class names.
+
+So we should config `content` section of the `tailwind.config.js`, then Tailwind will know which css classes are used.
+
+Let's update *frontend/tailwind.config.js*
+
+```js
+const Path = require("path");
+const pwd = process.env.PWD;
+
+// We can add current project paths here
+const projectPaths = [
+ Path.join(pwd, "../example/templates/**/*.html"),
+ // add js file paths if you need
+];
+
+const contentPaths = [...projectPaths];
+console.log(`tailwindcss will scan ${contentPaths}`);
+
+module.exports = {
+ content: contentPaths,
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
+```
+
+Notes:
+
+1. Here we add Django templates path to the `projectPaths`
+1. And then we pass the `contentPaths` to the `content`
+1. The final built css file will contain css classes used in the Django templates
+
+## Import Tailwind CSS
+
+Update *src/styles/index.scss*
+
+```scss
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+.jumbotron {
+ // should be relative path of the entry scss file
+ background-image: url("../../vendors/images/sample.jpg");
+ background-size: cover;
+}
+
+.btn-blue {
+ @apply inline-block px-4 py-2;
+ @apply font-semibold rounded-lg shadow-md;
+ @apply bg-blue-500 text-white;
+ @apply hover:bg-blue-700 focus:outline-none;
+ @apply focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
+}
+```
+
+```
+$ npm run start
+
+tailwindcss will scan django_basic/example/templates/**/*.html
+```
+
+Edit Django template `templates/index.html`
+
+```html hl_lines="8 28"
+{% load webpack_loader static %}
+
+
+
+
+
+ Index
+ {% stylesheet_pack 'app' %}
+
+
+
+
+
+
Hello, world!
+
+
This is a template for a simple marketing or informational website. It includes a large callout called a
+ jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.