newbie to TE

[MPGs007]

Hi there,
Happy to be here and looing forward to using elements to the max - having some silly issues atm though and hopeful someone can point me in the right direction.
Been using laravel and tailwindcss for a while but focused on the backend - now I'm trying to make things look pretty.
Started with TE and thought I'd start from scratch with the tutorial on the website .... however, when I run the commands installing the latest blank vanilla projects I'm unable to generate a tailwind.config.js file as npm reports I'm running win 32.
Checked versions and updated everything - node -p "process.arch" reports 64
I'm stuck and can't complete the basic tutorials - anyone else found an issue with the latest updates

tried audit and even forcing through a fix

npm audit report

deep-extend <0.5.1
Severity: critical
Prototype Pollution in deep-extend - GHSA-hr2v-3952-633q
fix available via npm audit fix
node_modules/npx/node_modules/deep-extend
rc 0.1.0 - 1.2.6
Depends on vulnerable versions of deep-extend
node_modules/npx/node_modules/rc

dot-prop <4.2.1
Severity: high
dot-prop Prototype Pollution vulnerability - GHSA-ff7x-qrg7-qggm
fix available via npm audit fix
node_modules/npx/node_modules/configstore/node_modules/dot-prop

got <11.8.5
Severity: moderate
Got allows a redirect to a UNIX socket - GHSA-pfrx-2q88-qq97
fix available via npm audit fix --force
Will install npx@10.2.2, which is a breaking change
node_modules/npx/node_modules/got
package-json <=6.5.0
Depends on vulnerable versions of got
node_modules/npx/node_modules/package-json
latest-version 0.2.0 - 5.1.0
Depends on vulnerable versions of package-json
node_modules/npx/node_modules/latest-version
update-notifier 0.2.0 - 5.1.0
Depends on vulnerable versions of latest-version
node_modules/npx/node_modules/update-notifier
npx 1.0.0 - 8.1.1
Depends on vulnerable versions of update-notifier
Depends on vulnerable versions of yargs
node_modules/npx

hosted-git-info <2.8.9
Severity: moderate
Regular Expression Denial of Service in hosted-git-info - GHSA-43f8-2h32-f4cj
fix available via npm audit fix
node_modules/npx/node_modules/hosted-git-info

ini <1.3.6
Severity: high
ini before 1.3.6 vulnerable to Prototype Pollution via ini.parse - GHSA-qqgx-2p2h-9c37
fix available via npm audit fix
node_modules/npx/node_modules/ini

mem <4.0.0
Severity: moderate
Denial of Service in mem - GHSA-4xcv-9jjx-gfj3
fix available via npm audit fix --force
Will install npx@10.2.2, which is a breaking change
node_modules/npx/node_modules/mem
os-locale 2.0.0 - 3.0.0
Depends on vulnerable versions of mem
node_modules/npx/node_modules/os-locale
yargs 8.0.0-candidate.0 - 12.0.5
Depends on vulnerable versions of os-locale
Depends on vulnerable versions of yargs-parser
node_modules/npx/node_modules/yargs

minimist 1.0.0 - 1.2.5
Severity: critical
Prototype Pollution in minimist - GHSA-vh95-rmgr-6w4m
Prototype Pollution in minimist - GHSA-xvch-5gv4-984h
fix available via npm audit fix
node_modules/npx/node_modules/rc/node_modules/minimist

semver <5.7.2
Severity: moderate
semver vulnerable to Regular Expression Denial of Service - GHSA-c2qf-rxjj-qqgw
fix available via npm audit fix
node_modules/npx/node_modules/semver

y18n <3.2.2
Severity: high
Prototype Pollution in y18n - GHSA-c4w7-xm78-47vh
fix available via npm audit fix
node_modules/npx/node_modules/y18n

yargs-parser 6.0.0 - 13.1.1
Severity: moderate
yargs-parser Vulnerable to Prototype Pollution - GHSA-p9pc-299p-vxgp
fix available via npm audit fix --force
Will install npx@10.2.2, which is a breaking change
node_modules/npx/node_modules/yargs-parser

17 vulnerabilities (11 moderate, 3 high, 3 critical)

To address issues that do not require attention, run:
npm audit fix

To address all issues (including breaking changes), run:
npm audit fix --force
 noelm   te-vite   20.6.1   8.945s⠀   npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p  100  14:11:11 

up to date, audited 225 packages in 3s

20 packages are looking for funding
run npm fund for details

17 vulnerabilities (11 moderate, 3 high, 3 critical)

To address issues that do not require attention, run:
npm audit fix

To address all issues (including breaking changes), run:
npm audit fix --force

ANY / ALL help greatly appreciated - as would really like to practice the basics before plugging tailwind into a large project

thank you in advance

Best
Noel

[MPGs007]

Maybe just over thinking it
tried breaking the commands down to see if I could generate the tailwind.config.js & it worked so either updates have sorted it or I was getting confused
so vs code windows - didn't like * npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

but it generated the package.json which includes dev dependency for autoprefixer postcss etc - it didn't create a postcss.config.js or tailwind.config.js

ran npx tailwindcss init -p - which sorted my tailwind.config.js problem - hopeful I can get learning now

npm audit still shows errors -17 vulnerabilities (11 moderate, 3 high, 3 critical) - not had any errors installing tailwind previously so have to assume a conflict with the latest vite updates from the previous command - npm create vite@latest te-vite

** newbie I know - thanks for your patience

[juujisai]

Hi! Yes, the npx tailwindcss init -p generates the postcss.config.js and tailwind.config.js files. It has to be run after installing the tailwind, postcss and autoprefixer packages. Have fun with Tailwind Elements!

[MPGs007]

Thank you - I have the config files as above - was just confused when the tutorial steps didn't behave as expected following the instructions. All seem to reference .cjs files not the .js files I have i.e tailwind.config.cjs

Are there any tutorials planned for how to install Tailwind Elements with Laravel 10 jetstream setups as these are bundled with Vite, tailwindcss and having the functionality of Tailwind elements would encourage a lot more devs to use TE

I have it working but it is a workaround and not a clean install, seems to be a lot of duplication in files so would appreciate knowing the "best way" to install tailwind-elements into existing laravel 10 projects.

Or perhaps you can share a github repo for a clean laravel 10 jetstream project with the tailwind postcss and vite configs set up for use with tailwind elements? as a template

hoping to be able to utilise Tailwind elements to its full potential

many thanks

[juujisai]

We are planning to update our integration tutorials. As of sharing of a github repo with some kind of starters, in the future there are plans for that aswell.