TheCloud/hugoDocs
1
0
Fork 0
mirror of https://github.com/gohugoio/hugoDocs.git synced 2025-08-03 20:49:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

content: Reformat css.TailwindCSS setup steps

Browse Source
This commit is contained in:
Joe Mooring 2025-02-11 19:08:34 -08:00 committed by GitHub
parent 3226e668fc
commit c7265041f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
content/en/functions/css/TailwindCSS.md
View File

@ -24,8 +24,9 @@ Use the `css.TailwindCSS` function to process your Tailwind CSS files. This fun
## Setup ## Setup
Step 1 ###### Step 1
: Install the Tailwind CSS CLI v4.0 or later:
Install the Tailwind CSS CLI v4.0 or later:
```sh ```sh
npm install --save-dev tailwindcss @tailwindcss/cli npm install --save-dev tailwindcss @tailwindcss/cli
@ -35,8 +36,9 @@ The TailwindCSS CLI is also available as a [standalone executable] if you want t
[standalone executable]: https://github.com/tailwindlabs/tailwindcss/releases/latest [standalone executable]: https://github.com/tailwindlabs/tailwindcss/releases/latest
Step 2 ###### Step 2
: Add this to your site configuration:
Add this to your site configuration:
{{< code-toggle file=hugo copy=true >}} {{< code-toggle file=hugo copy=true >}}
[[module.mounts]] [[module.mounts]]
@ -57,8 +59,9 @@ target = "css"
{{< /code-toggle >}} {{< /code-toggle >}}
Step 3 ###### Step 3
: Create a CSS entry file:
Create a CSS entry file:
{{< code file=assets/css/main.css copy=true >}} {{< code file=assets/css/main.css copy=true >}}
@import "tailwindcss"; @import "tailwindcss";
@ -67,8 +70,9 @@ Step 3
Tailwind CSS respects `.gitignore` files. This means that if `hugo_stats.json` is listed in your `.gitignore` file, Tailwind CSS will ignore it. To make `hugo_stats.json` available to Tailwind CSS you must explicitly source it as shown in the example above. Tailwind CSS respects `.gitignore` files. This means that if `hugo_stats.json` is listed in your `.gitignore` file, Tailwind CSS will ignore it. To make `hugo_stats.json` available to Tailwind CSS you must explicitly source it as shown in the example above.
Step 4 ###### Step 4
: Create a partial template to process the CSS with the Tailwind CSS CLI:
Create a partial template to process the CSS with the Tailwind CSS CLI:
{{< code file=layouts/partials/css.html copy=true >}} {{< code file=layouts/partials/css.html copy=true >}}
{{ with (templates.Defer (dict "key" "global")) }} {{ with (templates.Defer (dict "key" "global")) }}
@ -90,8 +94,9 @@ Step 4
{{ end }} {{ end }}
{{< /code >}} {{< /code >}}
Step 5 ###### Step 5
: Call the partial template from your base template:
Call the partial template from your base template:
{{< code file=layouts/default/baseof.html >}} {{< code file=layouts/default/baseof.html >}}
<head> <head>
@ -101,8 +106,9 @@ Step 5
<head> <head>
{{< /code >}} {{< /code >}}
Step 6 ###### Step 6
: Optionally create a `tailwind.config.js` file in the root of your project as shown below. This is necessary if you use the [Tailwind CSS IntelliSense
Optionally create a `tailwind.config.js` file in the root of your project as shown below. This is necessary if you use the [Tailwind CSS IntelliSense
extension] for Visual Studio Code. extension] for Visual Studio Code.
[Tailwind CSS IntelliSense [Tailwind CSS IntelliSense