Skip to content

stephenlaichaowen/tailwindcss-components-collections

Repository files navigation

Tailwind-CSS-UI

The project contains the components I code from Tailwind CSS UI with pure CSS using vue/vite framework

Components List (Fully Responsive)

  • Navbar
  • Dropdown menu
  • Form
    • Signin
    • Singup
  • Alerts (up to 7 styles)
  • Card

I plan to code this ui kit with tailwindcss, then I realize that I don't need to because figma design tells you all specs of the components such as font (family, weight, color), line height, text (background) color, etc. So the best way is to code directly with pure css because it is the best way much better than using those UI libraries because it takes some efforts to customize even it is just to adjust 1px. Anyhow, if you are tailwindcss style lovers you are welcome to copy the code and past into your file, so you don't need to code the component from stratch. By simply applying the prebuilt component you can get your project up and running as quickly as possible, enjoy !!!

P.S. I deployed this project to vercel with build directory, for some reason the font (I use Quicksand) is not applied I think it has to do with vite building process, anyhow you should be able to fix this issue by importing google fonts link into html and that should fix the problem !!!

Stephen Lai


How to run this project

  • run npm i to install all the dependencies
  • run npm run dev to start the development server

that's all 😎😎😎