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:
- Install first-party plugins:
yarn add @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio
- 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
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:
The CSS generated really is that large:
(Thanks for this repository btw, it's really helpful.)
fix nested a tags
@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 aboutvite
orthis repo
orvue router next
?Failed to load url /service-worker.js (resolved id: /service-worker.js). Does the file exist?
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.3b57d74c
fix(build): fix import-fresh shimf52db58
fix: decode incoming URL38b9613
feat: exportresolvePackageData
andresolvePackageEntry
helpers (#1307)ec2bf6c
chore: test comments [skip ci]7858e62
feat: dedupe optionb665b92
fix: keepthis
defined inconfigureServer
hook (#1304)56bcb0c
feat(plugin-vue): export vue query parse API (#1303)9d0a8e7
feat: exposeloadEnv
in public api (#1300)6ce6d5c
fix(resolve): prioritize module + avoid mutating path whenDependabot 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 readmeAdditionally, you can set the following in your Dependabot dashboard:
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?
2 vulnerabilities (1 high, 1 critical) found label:security
Critical and high secerity vulnerabilities found in this repo that are comming from npm dependencies:
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.
Commits
23b1369
Release 3.2 version967788e
Remove TS test tools27eaa90
Simplify new binary toola9d9123
Update dependencies32b9bda
Allows passing size or custom alphabet via cli as args (#334)246d5f8
Update viteafdf9c9
doc: Fixed Typo (#335)90a446f
Update benchmark results8ba2319
bench: add@napi-rs/uuid
v4 (#333)f425778
Release 3.1.32 versionDependabot 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 languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
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.
... (truncated)
Changelog
Sourced from tailwindcss's changelog.
... (truncated)
Commits
5100270
2.2.78fabe13
Update changelogcbf3da0
Hotfix: Use universal selector again (#5060)90da0b3
Rebuild fixtures4d598d5
2.2.6e66245f
Update changeloga76fb7f
Fix issue where base styles not generated for translate transforms in JIT (#5...81f9e94
Update version in fixturesc1c5cf0
2.2.592ab98d
Update changelogDependabot 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)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.
... (truncated)
Commits
dabc42a
release: v2.4.389e3160
fix: call createFileOnlyEntry() only for CSS deps, fix #4150 (#4267)244b15b
chore: simplify relative path import (#4323)decc7d8
feat: library mode does not include preload (#4097)179a057
feat:vite preview
port is used automatically+1
(#4219)02e45a0
chore(deps): update all non-major dependencies (#4309)016b5d1
chore: no implicit any for local vars (#4314)da64197
fix(util): copyDir may cause an infinite loop (#4310)887c247
fix(dev): only rewrite SSR stacktrace when possible (#4248)772b2f7
feat: enable usage of function as library fileName, close #3585 (#3625)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)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.
... (truncated)
Changelog
Sourced from postcss's changelog.
Commits
91c6d66
Release 8.3.6 versiond3e7aa9
Update dependenciesc72594b
Merge pull request #1618 from Gusted/fix-missed-semicolon422b5bf
Return correct column onmissed semicolon
1545d8a
Merge pull request #1610 from hex-ci/patch-1476141a
Added postcss-unit-processor plugin to the list56dcf91
Added postcss-unit-processor plugin to the list7e7b0e9
Merge pull request #1605 from megos/fix-duplicate-changelog08ea82e
Fix duplicate changeloge3781e9
Release 8.3.5 versionDependabot 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)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.
... (truncated)
Commits
9821bea
release: v2.4.20f45c21
chore(deps): update all non-major dependencies (#4213)25d86eb
build: userollup -w
for dev bundling (#4183)eac779c
fix: shutdown process after closing server (#4082)d377aae
fix: VITE_PRELOAD replacement error (#4163)b9cdfbe
fix(utils): add dot-all flag to match all characters, fix #3761 (#3780)5dd670f
feat: cache certificate (#3642)bf32b41
fix(build): resolve license files correctly (#4149)c115e19
release: v2.4.14227f35
chore(deps): update dependency open to v8 (#4137)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)chore(deps): update dependency tailwindcss to v3
This PR contains the following updates:
| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | tailwindcss (source) |
|
|
|
|
^2.2.19
->^3.2.4
|Release Notes
tailwindlabs/tailwindcss
v3.2.4
Compare Source
Added
blocklist
option to prevent generating unwanted CSS (#9812)Fixed
v3.2.3
Compare Source
Fixed
raw
content in the CLI (#9773)@apply
(#9765)!
) (#9791)v3.2.2
Compare Source
Fixed
font-feature-settings
are included in Preflight (#9707)@apply
in selectors with combinators and pseudos (#9722)v3.2.1
Compare Source
Fixed
supports
in types (#9616)micromatch
is a proper CLI dependency (#9620)modifiers
object formatchVariant
(ba6551db0f2726461371b4f3c6cd4c7090888504)v3.2.0
Compare Source
Added
@config
directive (#9405)relative: true
option to resolve content paths relative to the config file (#9396)supports-*
variant (#9453)min-*
andmax-*
variants (#9558)aria-*
variants (#9557, #9588)data-*
variants (#9559, #9588)break-keep
utility forword-break: keep-all
(#9393)collapse
utility forvisibility: collapse
(#9181)fill-none
utility forfill: none
(#9403)stroke-none
utility forstroke: none
(#9403)place-content-baseline
utility forplace-content: baseline
(#9498)place-items-baseline
utility forplace-items: baseline
(#9507)content-baseline
utility foralign-content: baseline
(#9507)font-feature-settings
for a font family (#9039)node16-linux-armv7
) (#9084)outline-offset
(#9136)matchUtilities
(#9541)min
/max
/clamp
(#9237)sort
function inmatchVariant
(#9423)postcss-nested
v6.0 (#9546)Fixed
respectDefaultRingColorOpacity
(#9070)@apply
-ing a selector with joined classes (#9107)outline-hidden
utility (#9147)hidden
attribute on elements in preflight (#9174)fontFamily
config TypeScript types (#9214):where()
and:has()
(#9309)null
orundefined
) when resolving the classList for intellisense (#9385)content
key in custom plugin configs (#9502, #9545)--content
is used in the CLI when passed (#9587)v3.1.8
Compare Source
Fixed
@apply
of user utilities when negative and non-negative versions both exist (#9027)v3.1.7
Compare Source
Fixed
@layer
rules (#8971)Added
resolveConfig
(#8924)v3.1.6
Compare Source
Fixed
theme()
in CSS (#8831)v3.1.5
Compare Source
Added
font-weight
for each font size utility (#8763)Fixed
tailwindcss
andautoprefixer
inpostcss.config.js
in standalone CLI (#8769)v3.1.4
Compare Source
Fixed
<alpha-value>
when usingtheme()
(#8652)/
that are preceded by numbers (#8688)v3.1.3
Compare Source
Fixed
corePluginList
type definition (#8587)addVariant
(#8608)theme()
function when using quotes (#8625)::marker
(#8622)v3.1.2
Compare Source
Fixed
\
is a valid arbitrary variant token (#8576)postcss-import
in the CLI by default in watch mode (#8574, #8580)v3.1.1
Compare Source
Fixed
::backdrop
into separate defaults group (#8567)v3.1.0
Compare Source
Fixed
@apply
(#8125)@apply
rules (#8213)[hidden]
style in preflight (#8248)important
selector to the front when@apply
-ing selector-modifying variants in custom utilities (#8313)matchVariant
that use at-rules and placeholders (#8392)tailwindcss/plugin
(#8400)addVariant
ormatchVariant
callback functions (#8455)postcss
installation first in the CLI (#8270)to
value from parent gradients (#8489)@import 'tailwindcss/...'
without node_modules (#8537)Changed
Added
Document
nodes (#7291)text-start
andtext-end
utilities (#6656)darkMode: 'class'
(#5800)--poll
option to the CLI (#7725)border-spacing
utilities (#7102)enabled
variant (#7905)tailwind.config.js
file (#7891)backdrop
variant (#7924, #8526)grid-flow-dense
utility (#8193)mix-blend-plus-lighter
utility (#8288)matchVariant
API (#8310, 34fd0fb8)prefers-contrast
media query variants (#8410)theme
function (#8416)postcss-import
support to the CLI (#8437)optional
variant (#8486)<alpha-value>
placeholder support for custom colors (#8501)v3.0.24
Compare Source
Fixed
@apply
(#7524)!
to selector class matching template candidate when using important modifier with mutli-class selectors (#7664)div:not(.foo)
if.foo
is never defined (#7815)rgb
,rgba
,hsl
andhsla
colors (#7933)percentage
data type is validated correctly (#8015)font-weight
is inherited by form controls in all browsers (#8078)Changed
chalk
withpicocolors
(#6039)cosmiconfig
withlilconfig
(#6039)cssnano
to avoid removing empty variables when minifying (#7818)v3.0.23
Compare Source
Fixed
:visited
pseudo class (#7458)getClassOrder
instead ofsortClassList
(#7459)v3.0.22
Compare Source
Fixed
postcss
to dependencies (#7424)v3.0.21
Compare Source
Fixed
v3.0.20
Compare Source
Added
context.sortClassList(classes)
(#7412)v3.0.19
Compare Source
Fixed
v3.0.18
Compare Source
Fixed
@apply
order regression (inaddComponents
,addUtilities
, ...) (#7232)v3.0.17
Compare Source
Fixed
--content
option (#7220)v3.0.16
Compare Source
Fixed
v3.0.15
Compare Source
Fixed
v3.0.14
Compare Source
Added
Fixed
v3.0.13
Compare Source
Fixed
v3.0.12
Compare Source
Fixed
linuxstatic
build target (#6914)@apply
works consistently with or without@layer
(#6938)experimental.optimizeUniversalDefaults
to only work with@tailwind base
(#6926)v3.0.11
Compare Source
Fixed
v3.0.10
Compare Source
Fixed
@apply
in files without@tailwind
directives (#6580, #6875)Added
v3.0.9
Compare Source
Fixed
DEBUG
flag (#6797, #6804)<
and>
characters in modifiers (#6851)theme()
works in arbitrary values (#6852)theme()
value usage in arbitrary properties (#6854)TAILWIND_MODE=watch
(#6858)v3.0.8
Compare Source
Fixed
abbr
rule in preflight (#6671)node16-linux-arm64
target for standalone CLI (#6693)v3.0.7
Compare Source
Fixed
@apply
(#6588)user
layers (#6589)@apply
of a rule inside an AtRule works (#6594)v3.0.6
Compare Source
Fixed
v3.0.5
Compare Source
Fixed
li
to list-style reset (9777562d)v3.0.4
Compare Source
Fixed
v3.0.3
Compare Source
Added
content
(#6449)li
to list-style reset (00f60e6)Fixed
v3.0.2
Compare Source
Fixed
@apply
(#7524)!
to selector class matching template candidate when using important modifier with mutli-class selectors (#7664)div:not(.foo)
if.foo
is never defined (#7815)rgb
,rgba
,hsl
andhsla
colors (#7933)percentage
data type is validated correctly (#8015)font-weight
is inherited by form controls in all browsers (#8078)Changed
chalk
withpicocolors
(#6039)cosmiconfig
withlilconfig
(#6039)cssnano
to avoid removing empty variables when minifying (#7818)v3.0.1
Compare Source
Fixed
v3.0.0
Compare Source
Fixed
before
andafter
) (#6018)Added
placeholder
variant (#6106)touch-action
utilities (#6115)portrait
andlandscape
variants (#6046)text-decoration-style
,text-decoration-thickness
, andtext-underline-offset
utilities (#6004)menu
reset to preflight (#6213)0
as a validlength
value (#6233, #6259)scale-*
utilities (c48e629)length
data type, by validating each value individually (#6283)Changed
decoration-slice
anddecoration-break
in favorbox-decoration-slice
andbox-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.
This PR has been generated by Mend Renovate. View repository job log here.
[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)