Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: nuxt-modules/tailwindcss
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v6.13.1
Choose a base ref
...
head repository: nuxt-modules/tailwindcss
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v6.13.2
Choose a head ref
  • 12 commits
  • 19 files changed
  • 6 contributors

Commits on Jan 24, 2025

  1. docs: mention tailwindcss-cli if tailwindcss init fails (#946)

    devbyray authored Jan 24, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    18f416e View commit details
  2. docs: direct to v3 tailwindcss docs

    ineshbose authored Jan 24, 2025
    Copy the full SHA
    a7c54c4 View commit details

Commits on Feb 23, 2025

  1. Copy the full SHA
    6c7b5d7 View commit details
  2. Merge branch 'main' of https://github.com/nuxt-modules/tailwindcss

    ineshbose committed Feb 23, 2025
    Copy the full SHA
    2bffdb0 View commit details
  3. chore(ci): fix corepack for actions/setup-node

    ineshbose committed Feb 23, 2025

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    c996f0a View commit details

Commits on Mar 9, 2025

  1. docs: revert to NuxtTailwind (#963)

    ineshbose authored Mar 9, 2025
    Copy the full SHA
    188acc0 View commit details
  2. docs: update module-options.md

    entwicklerberg authored Mar 9, 2025
    Copy the full SHA
    159ab53 View commit details

Commits on Mar 10, 2025

  1. fix(content): use pages:extend to get page routes

    * Fix config not working in nuxt 3.16
    
    * chore: use hook to watch pages
    
    ---------
    
    Co-authored-by: David Marr <david.marr@contextlabs.com>
    Co-authored-by: Inesh Bose <dev@inesh.xyz>
    3 people authored Mar 10, 2025
    Copy the full SHA
    f226a64 View commit details
  2. fix(config): dedupe tailwind.config from configPaths, closes #949

    ineshbose committed Mar 10, 2025
    Copy the full SHA
    f172e36 View commit details
  3. chore(deps): update dependency c12 to v3 (#957)

    Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
    renovate[bot] authored Mar 10, 2025
    Copy the full SHA
    6db6f1f View commit details
  4. chore: fix lint

    ineshbose committed Mar 10, 2025
    Copy the full SHA
    3dd3ada View commit details
  5. chore(release): v6.13.2

    ineshbose committed Mar 10, 2025
    Copy the full SHA
    2c809ac View commit details
2 changes: 1 addition & 1 deletion .github/workflows/autofix.yml
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: corepack enable
- run: npm i -g --force corepack && corepack enable
- uses: actions/setup-node@v4
with:
node-version: 18
4 changes: 2 additions & 2 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: corepack enable
- run: npm i -g --force corepack && corepack enable
- uses: actions/setup-node@v4
with:
node-version: 20
@@ -37,7 +37,7 @@ jobs:
path: docs-examples
sparse-checkout: |
examples
- run: corepack enable
- run: npm i -g --force corepack && corepack enable
- uses: actions/setup-node@v4
with:
node-version: 20
2 changes: 1 addition & 1 deletion .github/workflows/nightly.yml
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ jobs:
- uses: actions/checkout@v4
with:
fetch-depth: 0
- run: corepack enable
- run: npm i -g --force corepack && corepack enable
- uses: actions/setup-node@v4
with:
node-version: 20
2 changes: 1 addition & 1 deletion .github/workflows/nuxt2.yml
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: corepack enable
- run: npm i -g --force corepack && corepack enable
- uses: actions/setup-node@v4
with:
node-version: 18
2 changes: 1 addition & 1 deletion .github/workflows/sink.yml
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@ jobs:
with:
repository: "nuxt/nuxt.com"
path: test/fixtures/nuxt.com
- run: corepack enable
- run: npm i -g --force corepack && corepack enable
- run: |
sed -i '1s/^/import { resolve } from "pathe"\n/' test/fixtures/nuxt.com/nuxt.config.ts
sed -i -e 's|export default defineNuxtConfig({|export default defineNuxtConfig({\n alias: { "@nuxtjs/tailwindcss": resolve(__dirname, "../../../src/module") },|' test/fixtures/nuxt.com/nuxt.config.ts
29 changes: 29 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -2,6 +2,35 @@

All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

## v6.13.2

[compare changes](https://github.com/nuxt-modules/tailwindcss/compare/v6.13.1...v6.13.2)

### 🩹 Fixes

- **content:** Resolve `app/` dir for `utils`, resolves #955 ([#955](https://github.com/nuxt-modules/tailwindcss/issues/955))
- **content:** Use `pages:extend` to get page routes ([f226a64](https://github.com/nuxt-modules/tailwindcss/commit/f226a64))
- **config:** Dedupe `tailwind.config` from configPaths, closes #949 ([#949](https://github.com/nuxt-modules/tailwindcss/issues/949))

### 📖 Documentation

- Mention `tailwindcss-cli` if `tailwindcss init` fails ([#946](https://github.com/nuxt-modules/tailwindcss/pull/946))
- Direct to v3 tailwindcss docs ([a7c54c4](https://github.com/nuxt-modules/tailwindcss/commit/a7c54c4))
- Revert to NuxtTailwind ([#963](https://github.com/nuxt-modules/tailwindcss/pull/963))
- Update module-options.md ([159ab53](https://github.com/nuxt-modules/tailwindcss/commit/159ab53))

### 🏡 Chore

- **ci:** Fix corepack for actions/setup-node ([c996f0a](https://github.com/nuxt-modules/tailwindcss/commit/c996f0a))
- Fix lint ([3dd3ada](https://github.com/nuxt-modules/tailwindcss/commit/3dd3ada))

### ❤️ Contributors

- Inesh Bose <dev@inesh.xyz>
- David Marr ([@marr](http://github.com/marr))
- Ditmar Entwicklerberg ([@entwicklerberg](http://github.com/entwicklerberg))
- Dev By Ray ([@devbyray](http://github.com/devbyray))

## v6.13.1

[compare changes](https://github.com/nuxt-modules/tailwindcss/compare/v6.13.0...v6.13.1)
1 change: 0 additions & 1 deletion docs/app/components/AppHeader.vue
Original file line number Diff line number Diff line change
@@ -10,7 +10,6 @@ const { header } = useAppConfig()
<UHeader>
<template #logo>
<TheLogo class="h-6" />
<TailwindText class="h-4" />
<UTooltip
v-if="header.pkgVersion"
:text="`Latest release: v${header.pkgVersion}`"
11 changes: 0 additions & 11 deletions docs/app/components/TailwindText.vue

This file was deleted.

33 changes: 32 additions & 1 deletion docs/app/components/TheLogo.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<svg
viewBox="0 0 825 201"
viewBox="0 0 1565 201"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
@@ -24,6 +24,37 @@
d="M168 200H279C282.542 200 285.932 198.756 289 197C292.068 195.244 295.23 193.041 297 190C298.77 186.959 300.002 183.51 300 179.999C299.998 176.488 298.773 173.04 297 170.001L222 41C220.23 37.96 218.067 35.7552 215 34C211.933 32.2448 207.542 31 204 31C200.458 31 197.067 32.2448 194 34C190.933 35.7552 188.77 37.96 187 41L168 74L130 9.99764C128.228 6.95784 126.068 3.75491 123 2C119.932 0.245087 116.542 0 113 0C109.458 0 106.068 0.245087 103 2C99.9323 3.75491 96.7717 6.95784 95 9.99764L2 170.001C0.226979 173.04 0.00154312 176.488 1.90993e-06 179.999C-0.0015393 183.51 0.229648 186.959 2 190C3.77035 193.04 6.93245 195.244 10 197C13.0675 198.756 16.4578 200 20 200H90C117.737 200 137.925 187.558 152 164L186 105L204 74L259 168H186L168 200ZM89 168H40L113 42L150 105L125.491 147.725C116.144 163.01 105.488 168 89 168Z"
fill="#0ea5e9"
/>
<path
d="M911.345 199.402H881.368V85.3584H840V59.5937H952.714V85.3584H911.345V199.402Z"
fill="#0ea5e9"
/>
<path
d="M983.649 97.1423C992.043 97.1423 999.571 98.7401 1006.23 101.936C1012.89 104.998 1018.09 109.392 1021.82 115.118C1025.68 120.71 1027.62 127.234 1027.62 134.691V199.402H1000.04V185.421C998.305 190.082 994.841 193.876 989.645 196.806C984.582 199.602 978.587 201 971.659 201C965.264 201 959.535 199.735 954.472 197.205C949.542 194.542 945.679 190.947 942.881 186.42C940.083 181.76 938.684 176.567 938.684 170.841C938.684 160.988 942.015 153.265 948.676 147.673C955.471 141.948 964.398 139.085 975.456 139.085H992.443C994.841 139.085 996.706 138.419 998.038 137.088C999.371 135.623 1000.04 133.825 1000.04 131.695C1000.04 127.434 998.438 124.039 995.241 121.509C992.043 118.846 987.646 117.514 982.051 117.514C976.322 117.514 971.792 119.046 968.461 122.108C965.264 125.171 963.532 128.965 963.265 133.492H938.484C938.884 126.702 940.949 120.577 944.679 115.118C948.41 109.525 953.606 105.131 960.267 101.936C966.929 98.7401 974.723 97.1423 983.649 97.1423ZM978.653 180.828C985.315 180.828 990.511 178.697 994.241 174.436C998.105 170.176 1000.04 164.716 1000.04 158.059V156.661H979.653C975.389 156.661 971.925 157.859 969.26 160.256C966.596 162.653 965.264 165.782 965.264 169.643C965.264 172.972 966.529 175.701 969.061 177.832C971.592 179.829 974.79 180.828 978.653 180.828Z"
fill="#0ea5e9"
/>
<path
d="M1074.66 199.402H1046.68V98.7401H1074.66V199.402ZM1045.88 84.3598V55H1075.46V84.3598H1045.88Z"
fill="#0ea5e9"
/>
<path
d="M1124.46 199.402H1096.68V55H1124.46V199.402Z"
fill="#0ea5e9"
/>
<path
d="M1195.37 199.402H1171.19L1138.42 98.7401H1166.4L1183.38 160.855L1201.17 98.7401H1226.55L1244.54 160.855L1261.52 98.7401H1289.3L1256.73 199.402H1232.35L1213.96 136.688L1195.37 199.402Z"
fill="#0ea5e9"
/>
<path
d="M1329.74 199.402H1301.76V98.7401H1329.74V199.402ZM1300.96 84.3598V55H1330.54V84.3598H1300.96Z"
fill="#0ea5e9"
/>
<path
d="M1350.16 199.402V98.7401H1378.14V112.721C1380.94 107.794 1385 104 1390.33 101.337C1395.66 98.5404 1401.79 97.1423 1408.72 97.1423C1416.18 97.1423 1422.71 98.8067 1428.3 102.135C1434.03 105.464 1438.43 110.124 1441.49 116.116C1444.69 122.108 1446.29 128.965 1446.29 136.688V199.402H1418.31V142.88C1418.31 136.755 1416.51 131.762 1412.91 127.9C1409.32 123.906 1404.65 121.908 1398.93 121.908C1392.8 121.908 1387.8 124.039 1383.94 128.3C1380.07 132.427 1378.14 137.753 1378.14 144.278V199.402H1350.16Z"
fill="#0ea5e9"
/>
<path
d="M1509.64 201C1499.92 201 1491.39 198.87 1484.06 194.609C1476.87 190.348 1471.27 184.29 1467.27 176.434C1463.41 168.578 1461.48 159.457 1461.48 149.071C1461.48 138.685 1463.41 129.565 1467.27 121.709C1471.27 113.853 1476.87 107.794 1484.06 103.534C1491.26 99.2727 1499.65 97.1423 1509.24 97.1423C1515.37 97.1423 1520.83 98.2741 1525.63 100.538C1530.43 102.668 1534.29 105.597 1537.22 109.326V55H1565V199.402H1537.22V188.417C1534.42 192.279 1530.56 195.341 1525.63 197.605C1520.7 199.868 1515.37 201 1509.64 201ZM1514.24 177.033C1521.57 177.033 1527.5 174.503 1532.03 169.443C1536.56 164.25 1538.82 157.46 1538.82 149.071C1538.82 140.549 1536.56 133.759 1532.03 128.699C1527.63 123.506 1521.7 120.91 1514.24 120.91C1506.78 120.91 1500.78 123.506 1496.25 128.699C1491.86 133.759 1489.66 140.549 1489.66 149.071C1489.66 157.46 1491.92 164.25 1496.45 169.443C1500.98 174.503 1506.91 177.033 1514.24 177.033Z"
fill="#0ea5e9"
/>
</svg>
</template>
8 changes: 6 additions & 2 deletions docs/content/1.getting-started/1.installation.md
Original file line number Diff line number Diff line change
@@ -96,7 +96,7 @@ When running your Nuxt project, this module will look for these files:

If these files don't exist, the module will automatically generate a basic configuration for them, so you don't have to create these files manually.

You can create the `tailwind.config.js` file by running the following command, as noted by [the Tailwind CSS installation guide](https://tailwindcss.com/docs/installation):
You can create the `tailwind.config.js` file by running the following command, as noted by [the Tailwind CSS installation guide](https://v3.tailwindcss.com/docs/installation):

::code-group

@@ -114,7 +114,11 @@ pnpm dlx tailwindcss init

::

If you're going to create your own CSS file for Tailwind CSS, make sure to add the [`@tailwind`](https://tailwindcss.com/docs/functions-and-directives#tailwind) directives:
::callout{color="amber" icon="i-ph-warning-duotone"}
If the above fails, you can try `npx tailwindcss-cli init`.
::

If you're going to create your own CSS file for Tailwind CSS, make sure to add the [`@tailwind`](https://v3.tailwindcss.com/docs/functions-and-directives#tailwind) directives:

```css [~/assets/css/tailwind.css]
@tailwind base;
4 changes: 2 additions & 2 deletions docs/content/1.getting-started/2.module-options.md
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss'],
// Defaults options
tailwindcss: {
cssPath: ['~/assets/css/tailwind.css', { injectPosition: "first" }],
cssPath: [`${assetsDir}/css/tailwind.css`, { injectPosition: "first" }],
config: {},
viewer: true,
exposeConfig: false,
@@ -126,7 +126,7 @@ export default defineNuxtConfig({

- Default: `false`

As a solution to [referencing the configuration in JavaScript](https://tailwindcss.com/docs/configuration#referencing-in-java-script), if you need to resolve the Tailwind configuration in runtime, you can enable the `exposeConfig` option:
As a solution to [referencing the configuration in JavaScript](https://v3.tailwindcss.com/docs/configuration#referencing-in-java-script), if you need to resolve the Tailwind configuration in runtime, you can enable the `exposeConfig` option:

```ts [nuxt.config]
export default defineNuxtConfig({
6 changes: 3 additions & 3 deletions docs/content/2.tailwindcss/1.configuration.md
Original file line number Diff line number Diff line change
@@ -29,7 +29,7 @@ When you install the module, the default Tailwind configuration would be equival
}
```

You can learn more about the [Tailwind configuration](https://tailwindcss.com/docs/configuration) and [content configuration](https://tailwindcss.com/docs/content-configuration) in Tailwind docs.
You can learn more about the [Tailwind configuration](https://v3.tailwindcss.com/docs/configuration) and [content configuration](https://v3.tailwindcss.com/docs/content-configuration) in Tailwind docs.

## Overwriting the configuration

@@ -94,7 +94,7 @@ module.exports = {

::

Learn more about Tailwind configuration in [the official documentation](https://tailwindcss.com/docs/configuration).
Learn more about Tailwind configuration in [the official documentation](https://v3.tailwindcss.com/docs/configuration).

### `config` option

@@ -212,7 +212,7 @@ It is unlikely for `level` to ever be over 4 - the usual depth of a Tailwind con
::

::callout{color="blue" icon="i-ph-info-duotone"}
Named exports for properties below [root options](https://tailwindcss.com/docs/configuration#configuration-options) are prefixed with `_` (`_colors`, `_900`, `_2xl`) to ensure safe variable names. You can use default imports to provide any identifier or rename named imports using `as`. Properties with unsafe variable names (`spacing['1.5']`, `height['1/2']`, `keyframes.ping['75%, 100%']`) do not get exported individually.
Named exports for properties below [root options](https://v3.tailwindcss.com/docs/configuration#configuration-options) are prefixed with `_` (`_colors`, `_900`, `_2xl`) to ensure safe variable names. You can use default imports to provide any identifier or rename named imports using `as`. Properties with unsafe variable names (`spacing['1.5']`, `height['1/2']`, `keyframes.ping['75%, 100%']`) do not get exported individually.
::

## Tailwind CSS version
4 changes: 2 additions & 2 deletions docs/content/2.tailwindcss/2.editor-support.md
Original file line number Diff line number Diff line change
@@ -46,10 +46,10 @@ const variantClasses = {

## Configuration IntelliSense

Since Tailwind CSS v3.3, [ESM/TS configuration has been supported](https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) so your editor should automatically configure autocomplete based on your `tailwind.config`. If you have a complex Nuxt project with multiple Tailwind configurations that are within layers, passed from hooks or inline `nuxt.config` and want to use a merged configuration, the module generates it in `.nuxt/tailwind/postcss.mjs` that you can use by adding the following VSCode setting:
Since Tailwind CSS v3.3, [ESM/TS configuration has been supported](https://v3.tailwindcss.com/blog/tailwindcss-v3-3#esm-and-type-script-support) so your editor should automatically configure autocomplete based on your `tailwind.config`. If you have a complex Nuxt project with multiple Tailwind configurations that are within layers, passed from hooks or inline `nuxt.config` and want to use a merged configuration, the module generates it in `.nuxt/tailwind/postcss.mjs` that you can use by adding the following VSCode setting:

::callout{color="blue" icon="i-ph-info-duotone"}
Tailwind provides the [Tailwind CSS IntelliSense](https://tailwindcss.com/docs/editor-setup#jet-brains-ides) extension for better integration with different IDEs.
Tailwind provides the [Tailwind CSS IntelliSense](https://v3.tailwindcss.com/docs/editor-setup#jet-brains-ides) extension for better integration with different IDEs.
::

```diff [.vscode/settings.json]
2 changes: 1 addition & 1 deletion docs/content/3.examples/2.dark-mode.md
Original file line number Diff line number Diff line change
@@ -3,6 +3,6 @@ title: Dark Mode
description: Enable Dark Mode in Tailwind CSS with the help of `@nuxtjs/color-mode`
---

Read more about [Dark Mode in Tailwind CSS](https://tailwindcss.com/docs/dark-mode) and [`@nuxtjs/color-mode`](https://github.com/nuxt-modules/color-mode).
Read more about [Dark Mode in Tailwind CSS](https://v3.tailwindcss.com/docs/dark-mode) and [`@nuxtjs/color-mode`](https://github.com/nuxt-modules/color-mode).

:sandbox{src="docs-examples/examples/dark-mode"}
32 changes: 16 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@nuxtjs/tailwindcss",
"version": "6.13.1",
"version": "6.13.2",
"description": "Tailwind CSS module for Nuxt",
"repository": "nuxt-modules/tailwindcss",
"license": "MIT",
@@ -62,37 +62,37 @@
"test:types": "pnpm dev:prepare && tsc --noEmit && nuxi typecheck playground"
},
"dependencies": {
"@nuxt/kit": "^3.15.1",
"autoprefixer": "^10.4.20",
"c12": "^2.0.1",
"consola": "^3.3.3",
"c12": "^3.0.2",
"consola": "^3.4.0",
"defu": "^6.1.4",
"h3": "^1.13.1",
"h3": "^1.15.1",
"klona": "^2.0.6",
"pathe": "^2.0.1",
"postcss": "^8.4.49",
"pathe": "^2.0.3",
"postcss": "^8.5.3",
"postcss-nesting": "^13.0.1",
"tailwind-config-viewer": "^2.0.4",
"tailwindcss": "~3.4.17",
"ufo": "^1.5.4",
"unctx": "^2.4.1"
},
"devDependencies": {
"@fontsource/inter": "^5.1.1",
"@fontsource/inter": "^5.2.5",
"@nuxt/content": "^2.13.4",
"@nuxt/devtools": "^1.7.0",
"@nuxt/eslint-config": "^0.7.5",
"@nuxt/devtools": "^2.2.1",
"@nuxt/eslint-config": "^0.7.6",
"@nuxt/kit": "^3.16.0",
"@nuxt/module-builder": "^0.8.4",
"@nuxt/test-utils": "^3.14.4",
"@nuxt/test-utils": "^3.17.1",
"@tailwindcss/typography": "^0.5.16",
"changelogen": "^0.5.7",
"destr": "^2.0.3",
"eslint": "^9.18.0",
"happy-dom": "^16.5.3",
"nuxt": "^3.15.1",
"eslint": "^9.21.0",
"happy-dom": "^16.8.1",
"nuxt": "^3.16.0",
"typescript": "5.6.3",
"vitest": "^2.1.5",
"vue-tsc": "^2.2.0"
"vitest": "^3.0.8",
"vue-tsc": "^2.2.8"
},
"packageManager": "pnpm@9.15.3",
"resolutions": {
5 changes: 4 additions & 1 deletion playground/nuxt.config.ts
Original file line number Diff line number Diff line change
@@ -64,7 +64,10 @@ export default defineNuxtConfig({
},
'tailwindcss:resolvedConfig': (config, oldConfig) => {
// @ts-expect-error TODO: types for theme are not correct
logger.info('Running `tailwindcss:resolvedConfig` hook...', { typography: Boolean(config.theme.typography), hasOld: Boolean(oldConfig) })
logger.info('Running `tailwindcss:resolvedConfig` hook...', {
typography: Boolean(config.theme.typography),
hasOld: Boolean(oldConfig),
})
},
} satisfies Partial<ModuleHooks>,

Loading