Tailwind Starter Kit a beautiful extension for TailwindCSS, Free and Open Source

  • By Creative Tim
  • Last update: Jan 6, 2023
  • Comments: 14

Tailwind Starter Kit Tweet

version license GitHub issues open GitHub issues closed Join the chat at https://gitter.im/NIT-dgp/General Chat

Tailwind Starter Kit

A beautiful extension for TailwindCSS.

Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular.

CSS Components

Tailwind Starter Kit comes with 120 Fully Coded CSS elements.

Pages

This extension also comes with 4 sample pages.

JavaScript Components

We also feature 16 dynamic components.

Table of Contents

Versions

FREE Dashboard

Dashboard Page

Angular Dashboard Page HTML Dashboard Page React Dashboard Page VueJS Dashboard Page
Download Angular Download HTML Download React Download Vue

FREE Design System (UI Kit)

Landing Page

Angular Landing Page HTML Landing Page React Landing Page VueJS Landing Page NextJS Landing Page
Download Angular Download HTML Download React Download Vue Download Next

Login Page

Angular Login Page HTML Login Page React Login Page VueJS Login Page
Download Angular Download HTML Download React Download Vue

Profile Page

Angular Profile Page HTML Profile Page React Profile Page VueJS Profile Page
Download Angular Download HTML Download React Download Vue

Documentation

The documentation for the Tailwind Starter Kit is hosted at our website.

View More

Quick start

Custom themes and dashboards

Javascript React Angular
Vuejs NextJs Svelte
Notus Pro React

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Chrome Firefox Edge Safari Opera

Reporting Issues

We use GitHub Issues as the official bug tracker for the Angular Landing Page. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of the Angular Landing Page. Check the CHANGELOG from your dashboard on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Instagram: https://www.instagram.com/creativetimofficial/

Resources

Github

https://github.com/creativetimofficial/tailwind-starter-kit

Comments(14)

  • 1

    Horizontal lines on the HTML landing page with Safari

    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. Screen Shot 2020-09-23 at 4 03 34 PM

  • 2

    Added NextJS Landing Page using Tailwind Starter Kit

    Hello I created a NextJS version of Landing Page using the Tailwind Starter Kit, i also included the necessary configuration for it to work seamlessly here is some of what is included:

    1. Tailwind CSS with tailwind.config.css
    2. next-images package for handling images imports/requires in server-side
    3. PostCSS: purgecss for removing unused CSS and postcss-preset-env for creating compatible CSS with all browsers
    4. Typescript 4 support
    5. Scripts: build ssr & build static.

    Am contributing to this project mainly because I find it very useful and am thankful for the initiative and secondly as a contribution to Open-Source during Hacktoberfest 2020.

  • 3

    Plans on check tailwind.config.js into source control?

    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

  • 4

    MIT Licensed or not?

    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.

  • 5

    Routes not working OOTB

    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?

  • 6

    Download links under README are not working

    • 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
  • 7

    build(deps): bump elliptic from 6.5.3 to 6.5.4 in /Landing Page/next-landing-page

    Bumps elliptic from 6.5.3 to 6.5.4.

    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

    Click on non-React examples on website lead to homepage

    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.

    image

    Tested in latest FF and Chrome.

    This issue exists on all examples.

  • 9

    Is it possible to compile the stylesheet by ourself instead of using the cdn provided one?

    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.

  • 10

    navbar-expand-lg class does not exist in any of the imported css files

    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!

  • 11

    Clicking anywhere in the modal closes it

    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

  • 12

    multiple NPM issues

    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 [email protected]"^8.1.0" from [email protected] npm WARN node_modules/autoprefixer npm WARN peer [email protected]"^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 [email protected]"^8.1.0" from [email protected] npm WARN node_modules/autoprefixer npm WARN peer [email protected]"^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 [email protected]"^8.0.9" from [email protected] npm WARN node_modules/tailwindcss npm WARN [email protected]"2.2.19" from the root project npm WARN npm WARN Could not resolve dependency: npm WARN peer [email protected]"^8.0.9" from [email protected] npm WARN node_modules/tailwindcss npm WARN [email protected]"2.2.19" from the root project npm WARN npm WARN Conflicting peer dependency: [email protected] npm WARN node_modules/postcss npm WARN peer [email protected]"^8.0.9" from [email protected] npm WARN node_modules/tailwindcss npm WARN [email protected]"2.2.19" from the root project npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: [email protected] npm WARN Found: peer [email protected]"^8.2.14" from [email protected] npm WARN node_modules/tailwindcss/node_modules/postcss-nested npm WARN [email protected]"5.0.6" from [email protected] npm WARN node_modules/tailwindcss npm WARN npm WARN Could not resolve dependency: npm WARN peer [email protected]"^8.2.14" from [email protected] npm WARN node_modules/tailwindcss/node_modules/postcss-nested npm WARN [email protected]"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 gulp[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 - https://github.com/advisories/GHSA-jf85-cpcp-j695 Prototype Pollution in lodash - https://github.com/advisories/GHSA-4xc9-xhrj-v574 Prototype Pollution in lodash - https://github.com/advisories/GHSA-fvqr-27wr-82fm Command Injection in lodash - https://github.com/advisories/GHSA-35jh-r3h4-6jhm Regular Expression Denial of Service (ReDoS) in lodash - https://github.com/advisories/GHSA-29mw-wpgm-hmr9 Regular Expression Denial of Service (ReDoS) in lodash - https://github.com/advisories/GHSA-x5rq-j2xg-h7qm Prototype Pollution in lodash - https://github.com/advisories/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 - https://github.com/advisories/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 - https://github.com/advisories/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 - https://github.com/advisories/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

  • 13

    profile page responsiveness

    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 Screen Shot 2022-03-17 at 23 44 41

  • 14

    Iframe blocking

    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