posva/vite-tailwind-starter

Starter using Vite + Tailwind for super fast prototyping

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

2. 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

vite-tailwind-starter's Issues

Make it a template repo please !

i use the same configure and the same version in my vite app,but meet error

Error: PostCSS plugin tailwindcss requires PostCSS 8. Update PostCSS or downgrade this plugin.

dynamics routes doesnt work

vitejs/vite#439

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update all non-major dependencies (@vitejs/plugin-vue, @vue/compiler-sfc, autoprefixer, postcss, tailwindcss, vue)

---

• Check this box to trigger a request for Renovate to run again on this repository

postcss-functions: postcss.plugin was deprecated

I guess this project should be updated to postcss8 ?

Error in Codesandbox

Tried to test it on codesandbox and got an error. Any ideas?

Build is failing

bundle generated with build doesn't recognise any of the routes

How do I deploy a vite app without errors

Adding tailwindcss/ui slows down Dev Tools

Hi. I see a big difference in the time it takes to render styles panel in Chrome Dev Tools after enabling tailwindcss/ui plugin.

Inspect any element and styles shows up in panel:

• without plugin ~ 4s
• with the plugin enabled ~ 30-40s or even crashes the browser.

What can be the cause?

vite v1 support

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?

Failed to resolve module import "vite/hmr"

Reproduction:
Downloaded folder.

npm i
npm run dev

The server starts but when navigating to http://localhost:3000/ console says

[vite] Failed to resolve module import "vite/hmr". (imported by /main.js)

[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)

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

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

• Critical
  • [email protected] > [email protected] > [email protected]
• High
  • [email protected] > [email protected] > [email protected] > [email protected]

{
  "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
    }
  }
}

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)

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.)