Starter using Vite + Tailwind for super fast prototyping

  • By Eduardo San Martin Morote
  • Last update: Dec 27, 2022
  • Comments: 13

Vite + Tailwind CSS Starter

A Tailwind CSS starter template for Vite

Tailwind UI Users

If you have access to Tailwind UI, follow these steps to add it:

  1. Install first-party plugins:
yarn add @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio
  1. Add the plugins to tailwind.config.js:
// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

Installation

yarn

Development

yarn dev

Build

yarn build

Github

https://github.com/posva/vite-tailwind-starter

Comments(13)

  • 1

    Tailwind's purge feature not working?

    Is it just me or does this set up not purge the CSS contents? I see there's some file patterns listed for purging in tailwind.config.js, but when I do a build, I get this:

    $ yarn build
yarn run v1.22.4
$ vite build
vite v1.0.0-rc.4
[write] dist/_assets/index.c35eedc1.js 71.91kb, brotli: 24.80kb
[write] dist/_assets/style.19940dd6.css 1468.21kb, brotli: 36.42kb
[write] dist/index.html 0.44kb, brotli: 0.20kb
Build completed in 11.43s.

    The CSS generated really is that large:

    $ wc dist/_assets/*.css
       0    3891 1503444 dist/_assets/style.19940dd6.css

    (Thanks for this repository btw, it's really helpful.)

  • 2

    fix nested a tags

    image

    @posva this change is not triggering hmr on vite 1.0.0-beta.8. actually vite is output [vite:hmr] src/App.vue updated. (template) on console but in browser there is no change until manually reloading. is this problem about vite or this repo or vue router next ?

  • 3

    Failed to load url /service-worker.js (resolved id: /service-worker.js). Does the file exist?

    ➜  vite-tailwind-starter git:(master) ✗ yarn dev
yarn run v1.22.4
$ vite
vue-scoped: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
trim: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
vue-scoped: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration

  Vite dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.168.50.239:3000/
  > Network:  http://10.67.143.122:3000/

  ready in 274ms.

postcss-functions: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
postcss-plugin-purgecss: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
9:38:23 p.m. [vite] Internal server error: Failed to load url /service-worker.js (resolved id: /service-worker.js). Does the file exist?
      at transformRequest (/Volumes/960G/_pascalandy/11_FirePress/Github/random-stuff/posva/vite-tailwind-starter/node_modules/vite/dist/node/chunks/dep-3c926c03.js:59215:15)
      at async /Volumes/960G/_pascalandy/11_FirePress/Github/random-stuff/posva/vite-tailwind-starter/node_modules/vite/dist/node/chunks/dep-3c926c03.js:59314:32
9:38:31 p.m. [vite] Internal server error: Failed to load url /service-worker.js (resolved id: /service-worker.js). Does the file exist?
      at transformRequest (/Volumes/960G/_pascalandy/11_FirePress/Github/random-stuff/posva/vite-tailwind-starter/node_modules/vite/dist/node/chunks/dep-3c926c03.js:59215:15)
      at async /Volumes/960G/_pascalandy/11_FirePress/Github/random-stuff/posva/vite-tailwind-starter/node_modules/vite/dist/node/chunks/dep-3c926c03.js:59314:32 (x2)
9:38:42 p.m. [vite] hmr update /src/views/Home.vue
9:38:51 p.m. [vite] hmr update /src/views/Home.vue (x2)

    Screen Shot 2021-01-21 at 9 45 39 PM

  • 4

    build(deps-dev): bump vite from 1.0.0-rc.13 to 2.0.0-beta.3

    Bumps vite from 1.0.0-rc.13 to 2.0.0-beta.3.

    Commits
    • 20ccf3d release: v2.0.0-beta.3
    • b57d74c fix(build): fix import-fresh shim
    • f52db58 fix: decode incoming URL
    • 38b9613 feat: export resolvePackageData and resolvePackageEntry helpers (#1307)
    • ec2bf6c chore: test comments [skip ci]
    • 7858e62 feat: dedupe option
    • b665b92 fix: keep this defined in configureServer hook (#1304)
    • 56bcb0c feat(plugin-vue): export vue query parse API (#1303)
    • 9d0a8e7 feat: expose loadEnv in public api (#1300)
    • 6ce6d5c fix(resolve): prioritize module + avoid mutating path when
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    If all status checks pass Dependabot will automatically merge this pull request.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    • @dependabot badge me will comment on this PR with code to add a "Dependabot enabled" badge to your readme

    Additionally, you can set the following in your Dependabot dashboard:

    • Update frequency (including time of day and day of week)
    • Pull request limits (per update run and/or open at any time)
    • Automerge options (never/patch/minor, and dev/runtime dependencies)
    • Out-of-range updates (receive only lockfile updates, if desired)
    • Security updates (receive only security updates, if desired)
  • 5

    Purge with tailwindcss/ui

    I'm trying on an empty project with @tailwindcss/ui but it adds ~70kb to CSS

    (the second build with plugins: [require('@tailwindcss/ui')] commented out.

    Anyone else has the same issue?

    2020-08-08_230701

  • 6

    2 vulnerabilities (1 high, 1 critical) found label:security

    Critical and high secerity vulnerabilities found in this repo that are comming from npm dependencies:

    {
  "auditReportVersion": 2,
  "vulnerabilities": {
    "minimatch": {
      "name": "minimatch",
      "severity": "high",
      "isDirect": false,
      "via": [
        {
          "source": 1084765,
          "name": "minimatch",
          "dependency": "minimatch",
          "title": "minimatch ReDoS vulnerability",
          "url": "https://github.com/advisories/GHSA-f8q6-p94x-37v3",
          "severity": "high",
          "cwe": [
            "CWE-400"
          ],
          "cvss": {
            "score": 7.5,
            "vectorString": "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:N/I:N/A:H"
          },
          "range": "<3.0.5"
        }
      ],
      "effects": [],
      "range": "<3.0.5",
      "nodes": [
        "node_modules/minimatch"
      ],
      "fixAvailable": true
    },
    "minimist": {
      "name": "minimist",
      "severity": "critical",
      "isDirect": false,
      "via": [
        {
          "source": 1067342,
          "name": "minimist",
          "dependency": "minimist",
          "title": "Prototype Pollution in minimist",
          "url": "https://github.com/advisories/GHSA-xvch-5gv4-984h",
          "severity": "critical",
          "cwe": [
            "CWE-1321"
          ],
          "cvss": {
            "score": 9.8,
            "vectorString": "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:H/I:H/A:H"
          },
          "range": "<1.2.6"
        }
      ],
      "effects": [],
      "range": "<1.2.6",
      "nodes": [
        "node_modules/minimist"
      ],
      "fixAvailable": true
    }
  },
  "metadata": {
    "vulnerabilities": {
      "info": 0,
      "low": 0,
      "moderate": 0,
      "high": 1,
      "critical": 1,
      "total": 2
    },
    "dependencies": {
      "prod": 24,
      "dev": 170,
      "optional": 23,
      "peer": 0,
      "peerOptional": 0,
      "total": 193
    }
  }
}
  • 7

    chore(deps): bump nanoid from 3.1.30 to 3.2.0

    Bumps nanoid from 3.1.30 to 3.2.0.

    Changelog

    Sourced from nanoid's changelog.

    Change Log

    This project adheres to Semantic Versioning.

    3.2

    • Added --size and --alphabet arguments to binary (by Vitaly Baev).

    3.1.32

    • Reduced async exports size (by Artyom Arutyunyan).
    • Moved from Jest to uvu (by Vitaly Baev).

    3.1.31

    • Fixed collision vulnerability on object in size (by Artyom Arutyunyan).
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 8

    chore(deps-dev): bump tailwindcss from 2.1.2 to 2.2.7

    Bumps tailwindcss from 2.1.2 to 2.2.7.

    Release notes

    Sourced from tailwindcss's releases.

    v2.2.6

    Fixed

    • Fix issue where base styles not generated for translate transforms in JIT (#5038)

    v2.2.5

    Added

    • Added self-baseline utility (I know this is a patch release, no one's going to die relax) (#5000)

    Changed

    • JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850))

      This provides a very significant performance boost on pages with a huge number of DOM nodes, but there's a chance it could be a breaking change in very rare edge cases we haven't thought of. Please open an issue if anything related to shadows, rings, transforms, filters, or backdrop-filters seems to be behaving differently after upgrading.

    Fixed

    • Fix support for step-start and step-end in animation utilities (#4795))
    • JIT: Prevent presence of !* in templates from ruining everything (#4816))
    • JIT: Improve support for quotes in arbitrary values (#4817))
    • Fix filter/backdrop-filter/transform utilities being inserted into the wrong position if not all core plugins are enabled (#4852))
    • JIT: Fix @layer rules being mistakenly inserted during incremental rebuilds (#4853))
    • Improve build performance for projects with many small non-Tailwind stylesheets (#4644)
    • Ensure [hidden] works as expected on elements where we override the default display value in Preflight (#4873)
    • Fix variant configuration not being applied to backdropOpacity utilities (#4892)

    v2.2.4

    Fixed

    • Remove postinstall script that was preventing people from installing the library (1eacfb9)

    v2.2.3

    Added

    • Pass extended color palette to theme closures so it can be used without installing Tailwind when using npx tailwindcss (359252c)

    Fixed

    • JIT: Explicitly error when - is used as a custom separator (#4704)
    • JIT: Don't add multiple ~ when stacking peer-* variants (#4757)
    • Remove outdated focus style fix in Preflight (#4780)
    • Enable purge if provided on the CLI (#4772)
    • JIT: Fix error when not using a config file with postcss-cli (#4773)
    • Fix issue with resolveConfig not being importable in Next.js pags (#4725)

    v2.2.2

    Fixed

    • JIT: Reintroduce transform, filter, and backdrop-filter classes purely to create stacking contexts to minimize the impact of the breaking change (#4700)

    ... (truncated)

    Changelog

    Sourced from tailwindcss's changelog.

    [2.2.7] - 2021-07-23

    Fixed

    • Temporarily revert runtime performance optimizations introduced in v2.2.5, use universal selector again (#5060)

    [2.2.6] - 2021-07-21

    Fixed

    • Fix issue where base styles not generated for translate transforms in JIT (#5038)

    [2.2.5] - 2021-07-21

    Added

    • Added self-baseline utility (I know this is a patch release, no one's going to die relax) (#5000)

    Changed

    • JIT: Optimize universal selector usage by inlining only the relevant selectors (#4850))

      This provides a very significant performance boost on pages with a huge number of DOM nodes, but there's a chance it could be a breaking change in very rare edge cases we haven't thought of. Please open an issue if anything related to shadows, rings, transforms, filters, or backdrop-filters seems to be behaving differently after upgrading.

    Fixed

    • Fix support for step-start and step-end in animation utilities (#4795))
    • JIT: Prevent presence of !* in templates from ruining everything (#4816))
    • JIT: Improve support for quotes in arbitrary values (#4817))
    • Fix filter/backdrop-filter/transform utilities being inserted into the wrong position if not all core plugins are enabled (#4852))
    • JIT: Fix @layer rules being mistakenly inserted during incremental rebuilds (#4853))
    • Improve build performance for projects with many small non-Tailwind stylesheets (#4644)
    • Ensure [hidden] works as expected on elements where we override the default display value in Preflight (#4873)
    • Fix variant configuration not being applied to backdropOpacity utilities (#4892)

    [2.2.4] - 2021-06-23

    Fixed

    • Remove postinstall script that was preventing people from installing the library (1eacfb9)

    [2.2.3] - 2021-06-23

    Added

    • Pass extended color palette to theme closures so it can be used without installing Tailwind when using npx tailwindcss (359252c)

    Fixed

    • JIT: Explicitly error when - is used as a custom separator (#4704)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • 9

    chore(deps-dev): bump vite from 2.2.3 to 2.4.3

    Bumps vite from 2.2.3 to 2.4.3.

    Changelog

    Sourced from vite's changelog.

    2.4.3 (2021-07-20)

    Bug Fixes

    Features

    2.4.2 (2021-07-12)

    Bug Fixes

    Features

    2.4.1 (2021-07-06)

    Bug Fixes

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • 10

    chore(deps-dev): bump postcss from 8.2.12 to 8.3.6

    Bumps postcss from 8.2.12 to 8.3.6.

    Release notes

    Sourced from postcss's releases.

    8.3.6

    • Fixed column in missed semicolon error (by @​Gusted).

    8.3.5

    • Fixed broken AST detection.

    8.3.4

    • Fixed broken AST detection.

    8.3.3

    • Fixed broken AST on postcss dependency duplication in custom parsers.

    8.3.2

    • Update changelog.

    8.3.1

    • Fixed false positives PostCSS does nothing warning on syntax option.

    8.3 “Duke Murmur”

    PostCSS 8.3 improved source map parsing performance, added Node#assign() shortcut, and experimental Document node to AST.

    Thanks to Sponsors

    This release was possible thanks to our community.

    If your company wants to support the sustainability of front-end infrastructure or wants to give some love to PostCSS, you can join our supporters by:

    Source Map Performance

    Because PostCSS needs synchronous API, we can’t move from the old `source-map 0.6 to 0.7 (many other open-source projects too).

    @​7rulnik forked source-map 0.6 to source-map-js and back-ported performance improvements from 0.7. In 8.3 we switched from source-map to this source-map-js fork.

    You map see 4x performance improvements in parsing map from processing step before PostCSS (for instance, Sass).

    Document Nodes

    Thanks to @​gucong3000, PostCSS already parse CSS from HTML and JS files (CSS-in-JS templates and objects).

    ... (truncated)

    Changelog

    Sourced from postcss's changelog.

    8.3.6

    • Fixed column in missed semicolon error (by @​Gusted).

    8.3.5

    • Fixed broken AST detection.

    8.3.4

    • Fixed broken AST detection.

    8.3.3

    • Fixed broken AST on postcss dependency duplication in custom parsers.

    8.3.2

    • Update changelog.

    8.3.1

    • Fixed false positives PostCSS does nothing warning on syntax option.

    8.3 “Duke Murmur”

    • Added Node#assign() shortcut (by Jonathan Neal).
    • Added experimental Document node to AST (by Aleks Hudochenkov).
    • Moved to faster fork of source-map (by Valentin Semirulnik).

    8.2.15

    8.2.14

    • Removed source-map from client-side bundle (by Barak Igal).

    8.2.13

    • Fixed ReDoS vulnerabilities in source map parsing (by Yeting Li).
    Commits
    • 91c6d66 Release 8.3.6 version
    • d3e7aa9 Update dependencies
    • c72594b Merge pull request #1618 from Gusted/fix-missed-semicolon
    • 422b5bf Return correct column on missed semicolon
    • 1545d8a Merge pull request #1610 from hex-ci/patch-1
    • 476141a Added postcss-unit-processor plugin to the list
    • 56dcf91 Added postcss-unit-processor plugin to the list
    • 7e7b0e9 Merge pull request #1605 from megos/fix-duplicate-changelog
    • 08ea82e Fix duplicate changelog
    • e3781e9 Release 8.3.5 version
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • 11

    chore(deps-dev): bump vite from 2.2.3 to 2.4.2

    Bumps vite from 2.2.3 to 2.4.2.

    Changelog

    Sourced from vite's changelog.

    2.4.2 (2021-07-12)

    Bug Fixes

    Features

    2.4.1 (2021-07-06)

    Bug Fixes

    2.4.0 (2021-07-05)

    2.4.0-beta.3 (2021-07-02)

    Bug Fixes

    • ssr: Transform named default exports without altering scope (#4053) (5211aaf)
    • add type: "module" hint to cache directory (#4063) (58a29b2)
    • allow preprocessor to be installed outside of the root directory (#3988) (a0a80f8)
    • Avoid importing in source that __vitePreload has declared (close #4016) (#4041) (bd34203)
    • ensure that esbuild uses the same working directory as Vite (#4001) (19abafe)
    • fix esbuild break when importRe matches multiline import (#4054) (eb2e41b)
    • skip redirect and error fallback on middleware mode (#4057) (d156a9f)
    • the current main branch code build the vite project error (#4059) (4adc970)
    • use .mjs extension for injected client modules (#4061) (cca92c4)
    • use path type import, fix #4028 (#4031) (e092e89)

    2.4.0-beta.2 (2021-06-29)

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
  • 12

    chore(deps): update dependency tailwindcss to v3

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | tailwindcss (source) | ^2.2.19 -> ^3.2.4 | age | adoption | passing | confidence |

    Release Notes

    tailwindlabs/tailwindcss

    v3.2.4

    Compare Source

    Added
    • Add blocklist option to prevent generating unwanted CSS (#​9812)
    Fixed
    • Fix watching of files on Linux when renames are involved (#​9796)
    • Make sure errors are always displayed when watching for changes (#​9810)

    v3.2.3

    Compare Source

    Fixed
    • Fixed use of raw content in the CLI (#​9773)
    • Pick up changes from files that are both context and content deps (#​9787)
    • Sort pseudo-elements ONLY after classes when using variants and @apply (#​9765)
    • Support important utilities in the safelist (pattern must include a !) (#​9791)

    v3.2.2

    Compare Source

    Fixed
    • Escape special characters in resolved content base paths (#​9650)
    • Don't reuse container for array returning variant functions (#​9644)
    • Exclude non-relevant selectors when generating rules with the important modifier (#​9677)
    • Fix merging of arrays during config resolution (#​9706)
    • Ensure configured font-feature-settings are included in Preflight (#​9707)
    • Fix fractional values not being parsed properly inside arbitrary properties (#​9705)
    • Fix incorrect selectors when using @apply in selectors with combinators and pseudos (#​9722)
    • Fix cannot read properties of undefined (reading 'modifier') (#​9656, aa979d6)

    v3.2.1

    Compare Source

    Fixed

    v3.2.0

    Compare Source

    Added
    • Add new @config directive (#​9405)
    • Add new relative: true option to resolve content paths relative to the config file (#​9396)
    • Add new supports-* variant (#​9453)
    • Add new min-* and max-* variants (#​9558)
    • Add new aria-* variants (#​9557, #​9588)
    • Add new data-* variants (#​9559, #​9588)
    • Add new break-keep utility for word-break: keep-all (#​9393)
    • Add new collapse utility for visibility: collapse (#​9181)
    • Add new fill-none utility for fill: none (#​9403)
    • Add new stroke-none utility for stroke: none (#​9403)
    • Add new place-content-baseline utility for place-content: baseline (#​9498)
    • Add new place-items-baseline utility for place-items: baseline (#​9507)
    • Add new content-baseline utility for align-content: baseline (#​9507)
    • Add support for configuring default font-feature-settings for a font family (#​9039)
    • Add standalone CLI build for 32-bit Linux on ARM (node16-linux-armv7) (#​9084)
    • Add future flag to disable color opacity utility plugins (#​9088)
    • Add negative value support for outline-offset (#​9136)
    • Add support for modifiers to matchUtilities (#​9541)
    • Allow negating utilities using min/max/clamp (#​9237)
    • Implement fallback plugins when there is ambiguity between plugins when using arbitrary values (#​9376)
    • Support sort function in matchVariant (#​9423)
    • Upgrade to postcss-nested v6.0 (#​9546)
    Fixed
    • Use absolute paths when resolving changed files for resilience against working directory changes (#​9032)
    • Fix ring color utility generation when using respectDefaultRingColorOpacity (#​9070)
    • Sort tags before classes when @apply-ing a selector with joined classes (#​9107)
    • Remove invalid outline-hidden utility (#​9147)
    • Honor the hidden attribute on elements in preflight (#​9174)
    • Don't stop watching atomically renamed files (#​9173, #​9215)
    • Fix duplicate utilities issue causing memory leaks (#​9208)
    • Fix fontFamily config TypeScript types (#​9214)
    • Handle variants on complex selector utilities (#​9262)
    • Fix shared config mutation issue (#​9294)
    • Fix ordering of parallel variants (#​9282)
    • Handle variants in utility selectors using :where() and :has() (#​9309)
    • Improve data type analysis for arbitrary values (#​9320)
    • Don't emit generated utilities with invalid uses of theme functions (#​9319)
    • Revert change that only listened for stdin close on TTYs (#​9331)
    • Ignore unset values (like null or undefined) when resolving the classList for intellisense (#​9385)
    • Improve type checking for formal syntax (#​9349, #​9448)
    • Fix incorrect required content key in custom plugin configs (#​9502, #​9545)
    • Fix content path detection on Windows (#​9569)
    • Ensure --content is used in the CLI when passed (#​9587)

    v3.1.8

    Compare Source

    Fixed
    • Don’t prefix classes within reused arbitrary variants (#​8992)
    • Fix usage of alpha values inside single-named colors that are functions (#​9008)
    • Fix @apply of user utilities when negative and non-negative versions both exist (#​9027)

    v3.1.7

    Compare Source

    Fixed
    • Don't rewrite source maps for @layer rules (#​8971)
    Added
    • Added types for resolveConfig (#​8924)

    v3.1.6

    Compare Source

    Fixed
    • Fix usage on Node 12.x (b4e637e)
    • Handle theme keys with slashes when using theme() in CSS (#​8831)

    v3.1.5

    Compare Source

    Added
    • Support configuring a default font-weight for each font size utility (#​8763)
    • Add support for alpha values in safe list (#​8774)
    Fixed
    • Improve types to support fallback values in the CSS-in-JS syntax used in plugin APIs (#​8762)
    • Support including tailwindcss and autoprefixer in postcss.config.js in standalone CLI (#​8769)
    • Fix using special-characters as prefixes (#​8772)
    • Don’t prefix classes used within arbitrary variants (#​8773)
    • Add more explicit types for the default theme (#​8780)

    v3.1.4

    Compare Source

    Fixed
    • Provide default to <alpha-value> when using theme() (#​8652)
    • Detect arbitrary variants with quotes (#​8687)
    • Don’t add spaces around raw / that are preceded by numbers (#​8688)

    v3.1.3

    Compare Source

    Fixed
    • Fix extraction of multi-word utilities with arbitrary values and quotes (#​8604)
    • Fix casing of import of corePluginList type definition (#​8587)
    • Ignore PostCSS nodes returned by addVariant (#​8608)
    • Fix missing spaces around arithmetic operators (#​8615)
    • Detect alpha value in CSS theme() function when using quotes (#​8625)
    • Fix "Maximum call stack size exceeded" bug (#​8636)
    • Allow functions returning parallel variants to mutate the container (#​8622)
    • Remove text opacity CSS variables from ::marker (#​8622)

    v3.1.2

    Compare Source

    Fixed
    • Ensure \ is a valid arbitrary variant token (#​8576)
    • Enable postcss-import in the CLI by default in watch mode (#​8574, #​8580)

    v3.1.1

    Compare Source

    Fixed
    • Fix candidate extractor regression (#​8558)
    • Split ::backdrop into separate defaults group (#​8567)
    • Fix postcss plugin type (#​8564)
    • Fix class detection in markdown code fences and slim templates (#​8569)

    v3.1.0

    Compare Source

    Fixed
    • Types: allow for arbitrary theme values (for 3rd party plugins) (#​7926)
    • Don’t split vars with numbers in them inside arbitrary values (#​8091)
    • Require matching prefix when detecting negatives (#​8121)
    • Handle duplicate At Rules without children (#​8122)
    • Allow arbitrary values with commas in @apply (#​8125)
    • Fix intellisense for plugins with multiple @apply rules (#​8213)
    • Improve type detection for arbitrary color values (#​8201)
    • Support PostCSS config options in config file in CLI (#​8226)
    • Remove default [hidden] style in preflight (#​8248)
    • Only check selectors containing base apply candidates for circular dependencies (#​8222)
    • Rewrite default class extractor (#​8204)
    • Move important selector to the front when @apply-ing selector-modifying variants in custom utilities (#​8313)
    • Error when registering an invalid custom variant (#​8345)
    • Create tailwind.config.cjs file in ESM package when running init (#​8363)
    • Fix matchVariant that use at-rules and placeholders (#​8392)
    • Improve types of the tailwindcss/plugin (#​8400)
    • Allow returning parallel variants from addVariant or matchVariant callback functions (#​8455)
    • Try using local postcss installation first in the CLI (#​8270)
    • Allow default ring color to be a function (#​7587)
    • Don't inherit to value from parent gradients (#​8489)
    • Remove process dependency from log functions (#​8530)
    • Ensure we can use @import 'tailwindcss/...' without node_modules (#​8537)
    Changed
    • Only apply hover styles when supported (future) (#​8394)
    • Respect default ring color opacity (future) (#​8448, 3f4005e)
    Added
    • Support PostCSS Document nodes (#​7291)
    • Add text-start and text-end utilities (#​6656)
    • Support customizing class name when using darkMode: 'class' (#​5800)
    • Add --poll option to the CLI (#​7725)
    • Add new border-spacing utilities (#​7102)
    • Add enabled variant (#​7905)
    • Add TypeScript types for the tailwind.config.js file (#​7891)
    • Add backdrop variant (#​7924, #​8526)
    • Add grid-flow-dense utility (#​8193)
    • Add mix-blend-plus-lighter utility (#​8288)
    • Add arbitrary variants (#​8299)
    • Add experimental matchVariant API (#​8310, 34fd0fb8)
    • Add prefers-contrast media query variants (#​8410)
    • Add opacity support when referencing colors with theme function (#​8416)
    • Add postcss-import support to the CLI (#​8437)
    • Add optional variant (#​8486)
    • Add <alpha-value> placeholder support for custom colors (#​8501)

    v3.0.24

    Compare Source

    Fixed
    • Prevent nesting plugin from breaking other plugins (#​7563)
    • Recursively collapse adjacent rules (#​7565)
    • Preserve source maps for generated CSS (#​7588)
    • Split box shadows on top-level commas only (#​7479)
    • Use local user CSS cache for @apply (#​7524)
    • Invalidate context when main CSS changes (#​7626)
    • Only add ! to selector class matching template candidate when using important modifier with mutli-class selectors (#​7664)
    • Correctly parse and prefix animation names with dots (#​7163)
    • Fix extraction from template literal/function with array (#​7481)
    • Don't output unparsable arbitrary values (#​7789)
    • Fix generation of div:not(.foo) if .foo is never defined (#​7815)
    • Allow for custom properties in rgb, rgba, hsl and hsla colors (#​7933)
    • Remove autoprefixer as explicit peer-dependency to avoid invalid warnings in situations where it isn't actually needed (#​7949)
    • Ensure the percentage data type is validated correctly (#​8015)
    • Make sure font-weight is inherited by form controls in all browsers (#​8078)
    Changed
    • Replace chalk with picocolors (#​6039)
    • Replace cosmiconfig with lilconfig (#​6039)
    • Update cssnano to avoid removing empty variables when minifying (#​7818)

    v3.0.23

    Compare Source

    Fixed
    • Remove opacity variables from :visited pseudo class (#​7458)
    • Support arbitrary values + calc + theme with quotes (#​7462)
    • Don't duplicate layer output when scanning content with variants + wildcards (#​7478)
    • Implement getClassOrder instead of sortClassList (#​7459)

    v3.0.22

    Compare Source

    Fixed
    • Temporarily move postcss to dependencies (#​7424)

    v3.0.21

    Compare Source

    Fixed
    • Move prettier plugin to dev dependencies (#​7418)

    v3.0.20

    Compare Source

    Added
    • Expose context.sortClassList(classes) (#​7412)

    v3.0.19

    Compare Source

    Fixed
    • Fix preflight border color fallback (#​7288)
    • Correctly parse shadow lengths without a leading zero (#​7289)
    • Don't crash when scanning extremely long class candidates (#​7331)
    • Use less hacky fix for URLs detected as custom properties (#​7275)
    • Correctly generate negative utilities when dash is before the prefix (#​7295)
    • Detect prefixed negative utilities in the safelist (#​7295)

    v3.0.18

    Compare Source

    Fixed
    • Fix @apply order regression (in addComponents, addUtilities, ...) (#​7232)
    • Quick fix for incorrect arbitrary properties when using URLs (#​7252)

    v3.0.17

    Compare Source

    Fixed
    • Remove false positive warning in CLI when using the --content option (#​7220)

    v3.0.16

    Compare Source

    Fixed
    • Ensure to transpile the PostCSS Nesting plugin (tailwindcss/nesting) (#​7080)
    • Improve various warnings (#​7118)
    • Fix grammatical mistake (cca5a38)

    v3.0.15

    Compare Source

    Fixed
    • Temporarily remove optional chaining in nesting plugin (#​7077)

    v3.0.14

    Compare Source

    Added
    • Show warnings for invalid content config (#​7065)
    Fixed
    • Only emit utility/component variants when those layers exist (#​7066)
    • Ensure nesting plugins can receive options (#​7016)

    v3.0.13

    Compare Source

    Fixed
    • Fix consecutive builds with at apply producing different CSS (#​6999)

    v3.0.12

    Compare Source

    Fixed
    • Allow use of falsy values in theme config (#​6917)
    • Ensure we can apply classes that are grouped with non-class selectors (#​6922)
    • Improve standalone CLI compatibility on Linux by switching to the linuxstatic build target (#​6914)
    • Ensure @apply works consistently with or without @layer (#​6938)
    • Only emit defaults when using base layer (#​6926)
    • Emit plugin defaults regardless of usage (#​6926)
    • Move default border color back to preflight (#​6926)
    • Change experimental.optimizeUniversalDefaults to only work with @tailwind base (#​6926)

    v3.0.11

    Compare Source

    Fixed
    • Preserve casing of CSS variables added by plugins (#​6888)
    • Ignore content paths that are passed in but don't actually exist (#​6901)
    • Revert change that applies Tailwind's defaults in isolated environments like CSS modules (9fdc391)

    v3.0.10

    Compare Source

    Fixed
    • Fix @apply in files without @tailwind directives (#​6580, #​6875)
    • CLI: avoid unnecessary writes to output files (#​6550)
    Added
    • Allow piping data into the CLI (#​6876)

    v3.0.9

    Compare Source

    Fixed
    • Improve DEBUG flag (#​6797, #​6804)
    • Ensure we can use < and > characters in modifiers (#​6851)
    • Validate theme() works in arbitrary values (#​6852)
    • Properly detect theme() value usage in arbitrary properties (#​6854)
    • Improve collapsing of duplicate declarations (#​6856)
    • Remove support for TAILWIND_MODE=watch (#​6858)

    v3.0.8

    Compare Source

    Fixed
    • Reduce specificity of abbr rule in preflight (#​6671)
    • Support HSL with hue units in arbitrary values (#​6726)
    • Add node16-linux-arm64 target for standalone CLI (#​6693)

    v3.0.7

    Compare Source

    Fixed
    • Don't mutate custom color palette when overriding per-plugin colors (#​6546)
    • Improve circular dependency detection when using @apply (#​6588)
    • Only generate variants for non-user layers (#​6589)
    • Properly extract classes with arbitrary values in arrays and classes followed by escaped quotes (#​6590)
    • Improve jsx interpolation candidate matching (#​6593)
    • Ensure @apply of a rule inside an AtRule works (#​6594)

    v3.0.6

    Compare Source

    Fixed
    • Support square bracket notation in paths (#​6519)
    • Ensure all plugins are executed for a given candidate (#​6540)

    v3.0.5

    Compare Source

    Fixed
    • Revert: add li to list-style reset (9777562d)

    v3.0.4

    Compare Source

    Fixed
    • Insert always-on defaults layer in correct spot (#​6526)

    v3.0.3

    Compare Source

    Added
    • Warn about invalid globs in content (#​6449)
    • Add standalone tailwindcss CLI (#​6506)
    • Add li to list-style reset (00f60e6)
    Fixed
    • Don't output unparsable values (#​6469)
    • Fix text decoration utilities from overriding the new text decoration color/style/thickness utilities when used with a modifier (#​6378)
    • Move defaults to their own always-on layer (#​6500)
    • Support negative values in safelist patterns (#​6480)

    v3.0.2

    Compare Source

    Fixed
    • Prevent nesting plugin from breaking other plugins (#​7563)
    • Recursively collapse adjacent rules (#​7565)
    • Preserve source maps for generated CSS (#​7588)
    • Split box shadows on top-level commas only (#​7479)
    • Use local user CSS cache for @apply (#​7524)
    • Invalidate context when main CSS changes (#​7626)
    • Only add ! to selector class matching template candidate when using important modifier with mutli-class selectors (#​7664)
    • Correctly parse and prefix animation names with dots (#​7163)
    • Fix extraction from template literal/function with array (#​7481)
    • Don't output unparsable arbitrary values (#​7789)
    • Fix generation of div:not(.foo) if .foo is never defined (#​7815)
    • Allow for custom properties in rgb, rgba, hsl and hsla colors (#​7933)
    • Remove autoprefixer as explicit peer-dependency to avoid invalid warnings in situations where it isn't actually needed (#​7949)
    • Ensure the percentage data type is validated correctly (#​8015)
    • Make sure font-weight is inherited by form controls in all browsers (#​8078)
    Changed
    • Replace chalk with picocolors (#​6039)
    • Replace cosmiconfig with lilconfig (#​6039)
    • Update cssnano to avoid removing empty variables when minifying (#​7818)

    v3.0.1

    Compare Source

    Fixed
    • Fix preflight border color fallback (#​7288)
    • Correctly parse shadow lengths without a leading zero (#​7289)
    • Don't crash when scanning extremely long class candidates (#​7331)
    • Use less hacky fix for URLs detected as custom properties (#​7275)
    • Correctly generate negative utilities when dash is before the prefix (#​7295)
    • Detect prefixed negative utilities in the safelist (#​7295)

    v3.0.0

    Compare Source

    Fixed
    • Enforce the order of some variants (like before and after) (#​6018)
    Added
    • Add placeholder variant (#​6106)
    • Add composable touch-action utilities (#​6115)
    • Add support for "arbitrary properties" (#​6161)
    • Add portrait and landscape variants (#​6046)
    • Add text-decoration-style, text-decoration-thickness, and text-underline-offset utilities (#​6004)
    • Add menu reset to preflight (#​6213)
    • Allow 0 as a valid length value (#​6233, #​6259)
    • Add CSS functions to data types (#​6258)
    • Support negative values for scale-* utilities (c48e629)
    • Improve length data type, by validating each value individually (#​6283)
    Changed
    • Deprecate decoration-slice and decoration-break in favor box-decoration-slice and box-decoration-break (non-breaking) (#​6004)

    Configuration

    📅 Schedule: Branch creation - "before 3am on Monday" (UTC), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    ♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.

    • [ ] If you want to rebase/retry this PR, check this box

    This PR has been generated by Mend Renovate. View repository job log here.

  • 13

    [Quick Question] - Inclusion of aspect-ratio plugin

    Hi @posva - I'm a HUGE fan of your work (Pinia = <3).

    While I was inspecting this starter template, I noticed you are installing the tailwind aspect-ratio plugin. When searching through the code, I see no direct references or inclusion of the term aspect in any of the class utilities or HTML elements being rendered.

    Out of curiosity (not a criticism), what is the purpose of including the plugin? Is there something automatic which it is doing/providing simply by being included?

    Thanks again! _Armen (a huge fan)

Popular Tag

Related