under Quickstart
Download from github is not working, it takes to a broken page. I am sending a PR for the same

Hi,
First of all, thanks for this awesome product. As it says in the intro, It does not change or add any CSS to the already one from TailwindCSS, I was wondering will it be possible compile the css file by ourself.
I am trying to use it on a laravel project, using laravel mix to compile my own css file form standard tailwind installation. Since it is using the standard tailwind classes, should the theme work exactly same if i compile it form standard tailwind install
Thanks for your time.

in the mobile view the connect button isn't responsive it goes to the left side

can be fixed if it takes all the width on the mobile view or to be centered when the width is small

In react-dashboard-page
When I run npm start
its giving this kind of error

./src/index.js
Module not found: Can't resolve 'views/Dashboard.js' in 'C:\Users\kundu\Desktop\Tailwind Starter kit\tailwind-starter-kit\Dashboard Page\react-dashboard-page\src'

It is possible to add the installation from npm or composer to use it in PHP,

thks,

• Download links under Quick Start and Resources section under README file are not working.
• It seems like it still have the old URL of the "master" branch.: https://codeload.github.com/creativetimofficial/tailwind-starter-kit/zip/master
• I was able to make it work through: https://codeload.github.com/creativetimofficial/tailwind-starter-kit/zip/main

Hello guys.
It seems that you've forgotten this class, maybe from a bootstrap code copy paste, so I believe that you can safely delete it!
Keep up the good work!

Hi, it seems like there is an issue with the save change. If i try to make a change to the content the iframe pop up and block all the links and button. Is there any way to fix this ? thank you

PS C:\xampp\htdocs\creative_tim\notus_react_admin> npm audit fix --force
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating postcss to 2.2.19,which is outside your stated dependency range.
npm WARN audit Updating react-scripts to 5.0.1,which is a SemVer major change.
npm WARN audit Updating tailwindcss to 2.2.19,which is outside your stated dependency range.
npm WARN audit Updating gulp to 3.9.1,which is a SemVer major change.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/postcss
npm WARN peer postcss@"^8.1.0" from [email protected]
npm WARN node_modules/autoprefixer
npm WARN peer autoprefixer@"^10.0.2" from [email protected]
npm WARN node_modules/tailwindcss
npm WARN 1 more (the root project)
npm WARN 5 more (postcss-js, postcss-safe-parser, purgecss, tailwindcss, the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer postcss@"^8.1.0" from [email protected]
npm WARN node_modules/autoprefixer
npm WARN peer autoprefixer@"^10.0.2" from [email protected]
npm WARN node_modules/tailwindcss
npm WARN 1 more (the root project)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: peer postcss@"^8.0.9" from [email protected]
npm WARN node_modules/tailwindcss
npm WARN tailwindcss@"2.2.19" from the root project
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer postcss@"^8.0.9" from [email protected]
npm WARN node_modules/tailwindcss
npm WARN tailwindcss@"2.2.19" from the root project
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/postcss
npm WARN peer postcss@"^8.0.9" from [email protected]
npm WARN node_modules/tailwindcss
npm WARN tailwindcss@"2.2.19" from the root project
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: peer postcss@"^8.2.14" from [email protected]
npm WARN node_modules/tailwindcss/node_modules/postcss-nested
npm WARN postcss-nested@"5.0.6" from [email protected]
npm WARN node_modules/tailwindcss
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer postcss@"^8.2.14" from [email protected]
npm WARN node_modules/tailwindcss/node_modules/postcss-nested
npm WARN postcss-nested@"5.0.6" from [email protected]
npm WARN node_modules/tailwindcss
npm WARN deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

added 375 packages, removed 860 packages, changed 245 packages, and audited 1735 packages in 28s

207 packages are looking for funding
run npm fund for details

npm audit report

lodash <=4.17.20
Severity: critical
Prototype Pollution in lodash - GHSA-jf85-cpcp-j695
Prototype Pollution in lodash - GHSA-4xc9-xhrj-v574
Prototype Pollution in lodash - GHSA-fvqr-27wr-82fm
Command Injection in lodash - GHSA-35jh-r3h4-6jhm
Regular Expression Denial of Service (ReDoS) in lodash - GHSA-29mw-wpgm-hmr9
Regular Expression Denial of Service (ReDoS) in lodash - GHSA-x5rq-j2xg-h7qm
Prototype Pollution in lodash - GHSA-p6mc-m468-83gw
fix available via npm audit fix
node_modules/globule/node_modules/lodash
globule <=1.1.0
Depends on vulnerable versions of glob
Depends on vulnerable versions of lodash
Depends on vulnerable versions of minimatch
node_modules/globule
gaze 0.4.0 - 1.0.0
Depends on vulnerable versions of globule
node_modules/gaze
glob-watcher <=2.0.0
Depends on vulnerable versions of gaze
node_modules/glob-watcher

lodash.template <4.5.0
Severity: critical
Prototype Pollution in lodash - GHSA-jf85-cpcp-j695
fix available via npm audit fix --force
Will install [email protected], which is a breaking change
node_modules/lodash.template
gulp-util >=1.1.0
Depends on vulnerable versions of lodash.template
node_modules/gulp-util
gulp 2.6.1 - 3.9.1
Depends on vulnerable versions of gulp-util
Depends on vulnerable versions of vinyl-fs
node_modules/gulp

minimatch <3.0.2
Severity: high
Regular Expression Denial of Service in minimatch - GHSA-hxm2-r34f-qmc5
fix available via npm audit fix --force
Will install [email protected], which is a breaking change
node_modules/glob-stream/node_modules/minimatch
node_modules/globule/node_modules/minimatch
glob 3.0.0 - 5.0.14
Depends on vulnerable versions of minimatch
node_modules/glob-stream/node_modules/glob
node_modules/globule/node_modules/glob
glob-stream 0.2.0 - 5.2.0
Depends on vulnerable versions of glob
Depends on vulnerable versions of minimatch
node_modules/glob-stream
vinyl-fs <=1.0.0
Depends on vulnerable versions of glob-stream
Depends on vulnerable versions of glob-watcher
node_modules/vinyl-fs

nth-check <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - GHSA-rp65-9cf3-cjxr
fix available via npm audit fix --force
Will install [email protected], which is a breaking change
node_modules/svgo/node_modules/nth-check
css-select <=3.1.0
Depends on vulnerable versions of nth-check
node_modules/svgo/node_modules/css-select
svgo 1.0.0 - 1.3.2
Depends on vulnerable versions of css-select
node_modules/svgo
@svgr/plugin-svgo <=5.5.0
Depends on vulnerable versions of svgo
node_modules/@svgr/plugin-svgo
@svgr/webpack 4.0.0 - 5.5.0
Depends on vulnerable versions of @svgr/plugin-svgo
node_modules/@svgr/webpack
react-scripts >=2.1.4
Depends on vulnerable versions of @svgr/webpack
node_modules/react-scripts

17 vulnerabilities (13 high, 4 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

Hello,

Your work is amazing for a newcomer to Tailwind, it really simplifies things. I believe that the basic CSS components should be part of the Tailwind library, as they are part of the Bootstrap library. In fact, this was the case for version 1 of tailwind. But since version 2, they have become chargeable. In fact, your Starter Kit is becoming an open source version of TailwindUi. I invite you to rename it accordingly "tailwind open UI", it would make things clearer for newcomers, and it would certainly bring you a lot of participation on your repository.

Anyway, thanks again for your great work.

Dropdown needs to close on click elsewhere

BarChart.js line 2 imports a file that does not exist: 'Chart.js'

Hey, awesome project!

I was checking out the modal you have here and noticed clicking anywhere inside the modal will close it.

https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/react/modals/regular

here is the trace following the build tools page instructions

% npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/postcss
npm ERR!   postcss@"8.2.8" from the root project
npm ERR!   peer postcss@"^8.1.0" from [email protected]
npm ERR!   node_modules/autoprefixer
npm ERR!     autoprefixer@"10.2.5" from the root project
npm ERR!     peer autoprefixer@"^10.0.2" from [email protected]
npm ERR!     node_modules/tailwindcss
npm ERR!       tailwindcss@"2.0.4" from the root project
npm ERR!   2 more (tailwindcss, postcss-js)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"^8.2.14" from [email protected]
npm ERR! node_modules/tailwindcss/node_modules/postcss-nested
npm ERR!   postcss-nested@"^5.0.5" from [email protected]
npm ERR!   node_modules/tailwindcss
npm ERR!     tailwindcss@"2.0.4" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/christophevidal/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/christophevidal/.npm/_logs/2021-09-23T06_04_21_620Z-debug.log

The repository is marked with the MIT license, but the Resources section at the end of the README.md links to a License Agreement page, which is a proprietary license.

Hi everyone! First of all I want to say thanks and congratulate you on the awesome work on putting up this starter kit, I love how it looks and I am looking forward to implementing it on my projects.

However, I'm wondering if there is any plan on checking into GitHub the tailwind.config.js file, on that way developers can tweak some stuff according to their needs.

Again, thanks a lot for taking the time on building such an awesome template! <3

I expected the routes to work by simple adding new components and defining new routes, but it seems to need extra configuration. This is how I extended the Dashboard page's main.js:

import Vue from 'vue'
import Home from './views/Home.vue'
import About from './views/About.vue'

import "@fortawesome/fontawesome-free/css/all.min.css";

Vue.config.productionTip = false

const routes = {
  '/': Home,
  '/about': About
}

new Vue({
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute] || Home
    }
  },
  render (h) { return h(this.ViewComponent) },
}).$mount('#app')

I have created the Home component by renaming the Dashboard component, and created the About component. How do I make it respect these routes?

Hi, there are horizontal lines appearing before/after sections on the HTML landing page. This happens on Safari version 14.0. It also appears randomly, depending on the size of the safari window. Attached is an example of the issue, which is easy to reproduce.

I work as a Developer Advocate for Security and I am using this awesome starter kit (Profile Page HTML template) to bootstrap a demo in pure HTML and when testing the web page for the security headers I got a bad score because inline styles and inline javascript is used.

To build a secure webpage inline styles and inline script need to be removed.

CSS examples to move into the CSS file:

style="height: 500px;"

JS examples to move to the JS file...

from the html tags:

onclick="toggleNavbar('example-collapse-navbar')"

from the script tag:

  <script>
    function toggleNavbar(collapseID) {
      document.getElementById(collapseID).classList.toggle("hidden");
      document.getElementById(collapseID).classList.toggle("block");
    }
  </script>

The Content-Security-Policy header to test against:

default-src 'none'; manifest-src 'self'; base-uri 'self'; frame-ancestors 'none'; form-action 'none'; font-src https://cdnjs.cloudflare.com; img-src 'self';  script-src 'self'; style-src 'self' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/ https://unpkg.com/tailwindcss@%5E2/dist/;

Let me know if I can be of further help :)

The dashboard.html page in html-dashboard-page has a typo:

mx-autp

should be

mx-auto

Didn't check the other...

The color of the text needs to be changed to make it visible

I don't see any of the components included (i.e like alerts). Am I just blind? Thanks for the awesome components!

I've noticed some elements, especially buttons, don't have a focus state styled. Buttons even have the default browser outline disabled, without anything in its place. Meaning users cannot navigate using the tab key.
Generally, it's not that big of a deal since it can be added easily, but I think some basic visual info should be added by default.
Anyway, thanks for an amazing elements kit!

Symfony is the biggest php framework out there with over 2 BILLION downloads and already offers tailwind integration but NO UI components. Offering a pre configured download of your starter kit components would make it easy for users to integrate them into their project.

As it stands right now Symfony only supplies the database, php, and template engine for your project and leaves out most of the front end UI stuff so having a set of components to use would be awesome.

Right now your project offers several JS options and I think it is great you also offer a pure HTML option with vanilla JS code, it would be great to see a php option offered as well. Starting from html still requires a ton of work building the interaction between the backend and UI, which can be overwhelming with an unfamiliar system and would require millions of developers to do the same integration over and over again.

Hello, I configured to use tailwind like this:
screens: { 'xl': { 'max': '1279px'},
'lg': { 'max': '1023px' },
'md': { 'max': '767px' },
'sm': { 'max': '639px' },
https://tailwindcss.com/docs/breakpoints/#max-width-breakpoints

But now the site sidebar has reversed, in smartphone it shows the sidebar, and on desktop it disappears, what I have do to do change to work?

Thanks.

here is the trace following the build tools page instructions

% npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/postcss
npm ERR!   postcss@"8.2.8" from the root project
npm ERR!   peer postcss@"^8.1.0" from [email protected]
npm ERR!   node_modules/autoprefixer
npm ERR!     autoprefixer@"10.2.5" from the root project
npm ERR!     peer autoprefixer@"^10.0.2" from [email protected]
npm ERR!     node_modules/tailwindcss
npm ERR!       tailwindcss@"2.0.4" from the root project
npm ERR!   2 more (tailwindcss, postcss-js)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"^8.2.14" from [email protected]
npm ERR! node_modules/tailwindcss/node_modules/postcss-nested
npm ERR!   postcss-nested@"^5.0.5" from [email protected]
npm ERR!   node_modules/tailwindcss
npm ERR!     tailwindcss@"2.0.4" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/christophevidal/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/christophevidal/.npm/_logs/2021-09-23T06_04_21_620Z-debug.log

I'm trying to add inputs to the modal using the react example, however when i click on the input to write the modal automatically close

Example: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/react/tabs/text

If I click on any other language/framework than React, I get redirected to the home page.

Tested in latest FF and Chrome.

This issue exists on all examples.