├── assets ├── js │ ├── main.js │ └── plugins.js └── css │ ├── style.css │ └── output.css ├── .github └── FUNDING.yml ├── .gitignore ├── tailwind.config.js ├── input.css ├── package.json ├── README.md └── index.html /assets/js/main.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/js/plugins.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [risuvoo] 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | /node_modules 3 | # misc 4 | .DS_Store 5 | .idea 6 | *.pem 7 | 8 | # debug 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | .pnpm-debug.log* 13 | 14 | # vercel 15 | .vercel -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ['./**/*.html', './assets/js/**/*.js'], 4 | theme: { 5 | extend: { 6 | fontFamily: { 7 | urbanist: ['Urbanist', 'sans-serif'] 8 | }, 9 | }, 10 | }, 11 | plugins: [], 12 | } -------------------------------------------------------------------------------- /input.css: -------------------------------------------------------------------------------- 1 | /* google fonts */ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Urbanist:wght@300;400;500;600;700&display=swap'); 3 | /* google fonts end */ 4 | @tailwind base; 5 | @tailwind components; 6 | @tailwind utilities; 7 | 8 | body { 9 | font-family: 'Urbanist', sans-serif; 10 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Tailwind Template", 3 | "description": "tailwind template starter", 4 | "version": "1.0.0", 5 | "author": "risuvodev", 6 | "scripts": { 7 | "dev": "npx tailwindcss -i ./input.css -o ./assets/css/output.css --watch", 8 | "build": "npx tailwindcss -i ./input.css -o ./assets/css/output.css" 9 | }, 10 | "devDependencies": { 11 | "autoprefixer": "^10.4.17", 12 | "postcss": "^8.4.35", 13 | "tailwindcss": "^3.4.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # TailwindCSS Skeleton 💀 2 | 3 | #### Clone this repository 4 | 5 | `$ https://github.com/risuvoo/tailwindcss-skeleton` 6 | 7 | #### Install dependency : 8 | 9 | `$ npm install` 10 | 11 | #### For development mode run : 12 | 13 | `$ npm run dev` 14 | 15 | >Make necessary changes then run for production. 16 | 17 | #### For production mode run : 18 | 19 | `$ npm run build` 20 | 21 | ### Stargazers 22 | 23 | [![Stargazers repo roster for @risuvoo/tailwindcss-skeleton](https://reporoster.com/stars/risuvoo/tailwindcss-skeleton)](https://github.com/risuvoo/tailwindcss-skeleton/stargazers) 24 | 25 | ## Credits 26 | 27 | Made by [risuvoo](https://www.linkedin.com/in/risuvoo/) 28 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tailwind Skeleton 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 21 | 22 | 24 | 25 | 27 | 29 | 30 | 31 | 32 | 33 |
34 |
35 |
36 | 38 | 39 | 40 | 41 | 42 | 45 | 46 |
47 |

Rafiqul Islam Suvo

48 |

This is tailwindCss skeleton for instant setup your application

49 |
50 |
51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /assets/css/output.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Urbanist:wght@300;400;500;600;700&display=swap'); 2 | 3 | /* google fonts */ 4 | 5 | /* google fonts end */ 6 | 7 | /* ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com */ 8 | 9 | /* 10 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 11 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 12 | */ 13 | 14 | *, 15 | ::before, 16 | ::after { 17 | box-sizing: border-box; 18 | /* 1 */ 19 | border-width: 0; 20 | /* 2 */ 21 | border-style: solid; 22 | /* 2 */ 23 | border-color: #e5e7eb; 24 | /* 2 */ 25 | } 26 | 27 | ::before, 28 | ::after { 29 | --tw-content: ''; 30 | } 31 | 32 | /* 33 | 1. Use a consistent sensible line-height in all browsers. 34 | 2. Prevent adjustments of font size after orientation changes in iOS. 35 | 3. Use a more readable tab size. 36 | 4. Use the user's configured `sans` font-family by default. 37 | 5. Use the user's configured `sans` font-feature-settings by default. 38 | 6. Use the user's configured `sans` font-variation-settings by default. 39 | 7. Disable tap highlights on iOS 40 | */ 41 | 42 | html, 43 | :host { 44 | line-height: 1.5; 45 | /* 1 */ 46 | -webkit-text-size-adjust: 100%; 47 | /* 2 */ 48 | -moz-tab-size: 4; 49 | /* 3 */ 50 | -o-tab-size: 4; 51 | tab-size: 4; 52 | /* 3 */ 53 | font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; 54 | /* 4 */ 55 | font-feature-settings: normal; 56 | /* 5 */ 57 | font-variation-settings: normal; 58 | /* 6 */ 59 | -webkit-tap-highlight-color: transparent; 60 | /* 7 */ 61 | } 62 | 63 | /* 64 | 1. Remove the margin in all browsers. 65 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. 66 | */ 67 | 68 | body { 69 | margin: 0; 70 | /* 1 */ 71 | line-height: inherit; 72 | /* 2 */ 73 | } 74 | 75 | /* 76 | 1. Add the correct height in Firefox. 77 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 78 | 3. Ensure horizontal rules are visible by default. 79 | */ 80 | 81 | hr { 82 | height: 0; 83 | /* 1 */ 84 | color: inherit; 85 | /* 2 */ 86 | border-top-width: 1px; 87 | /* 3 */ 88 | } 89 | 90 | /* 91 | Add the correct text decoration in Chrome, Edge, and Safari. 92 | */ 93 | 94 | abbr:where([title]) { 95 | -webkit-text-decoration: underline dotted; 96 | text-decoration: underline dotted; 97 | } 98 | 99 | /* 100 | Remove the default font size and weight for headings. 101 | */ 102 | 103 | h1, 104 | h2, 105 | h3, 106 | h4, 107 | h5, 108 | h6 { 109 | font-size: inherit; 110 | font-weight: inherit; 111 | } 112 | 113 | /* 114 | Reset links to optimize for opt-in styling instead of opt-out. 115 | */ 116 | 117 | a { 118 | color: inherit; 119 | text-decoration: inherit; 120 | } 121 | 122 | /* 123 | Add the correct font weight in Edge and Safari. 124 | */ 125 | 126 | b, 127 | strong { 128 | font-weight: bolder; 129 | } 130 | 131 | /* 132 | 1. Use the user's configured `mono` font-family by default. 133 | 2. Use the user's configured `mono` font-feature-settings by default. 134 | 3. Use the user's configured `mono` font-variation-settings by default. 135 | 4. Correct the odd `em` font sizing in all browsers. 136 | */ 137 | 138 | code, 139 | kbd, 140 | samp, 141 | pre { 142 | font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 143 | /* 1 */ 144 | font-feature-settings: normal; 145 | /* 2 */ 146 | font-variation-settings: normal; 147 | /* 3 */ 148 | font-size: 1em; 149 | /* 4 */ 150 | } 151 | 152 | /* 153 | Add the correct font size in all browsers. 154 | */ 155 | 156 | small { 157 | font-size: 80%; 158 | } 159 | 160 | /* 161 | Prevent `sub` and `sup` elements from affecting the line height in all browsers. 162 | */ 163 | 164 | sub, 165 | sup { 166 | font-size: 75%; 167 | line-height: 0; 168 | position: relative; 169 | vertical-align: baseline; 170 | } 171 | 172 | sub { 173 | bottom: -0.25em; 174 | } 175 | 176 | sup { 177 | top: -0.5em; 178 | } 179 | 180 | /* 181 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 182 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 183 | 3. Remove gaps between table borders by default. 184 | */ 185 | 186 | table { 187 | text-indent: 0; 188 | /* 1 */ 189 | border-color: inherit; 190 | /* 2 */ 191 | border-collapse: collapse; 192 | /* 3 */ 193 | } 194 | 195 | /* 196 | 1. Change the font styles in all browsers. 197 | 2. Remove the margin in Firefox and Safari. 198 | 3. Remove default padding in all browsers. 199 | */ 200 | 201 | button, 202 | input, 203 | optgroup, 204 | select, 205 | textarea { 206 | font-family: inherit; 207 | /* 1 */ 208 | font-feature-settings: inherit; 209 | /* 1 */ 210 | font-variation-settings: inherit; 211 | /* 1 */ 212 | font-size: 100%; 213 | /* 1 */ 214 | font-weight: inherit; 215 | /* 1 */ 216 | line-height: inherit; 217 | /* 1 */ 218 | color: inherit; 219 | /* 1 */ 220 | margin: 0; 221 | /* 2 */ 222 | padding: 0; 223 | /* 3 */ 224 | } 225 | 226 | /* 227 | Remove the inheritance of text transform in Edge and Firefox. 228 | */ 229 | 230 | button, 231 | select { 232 | text-transform: none; 233 | } 234 | 235 | /* 236 | 1. Correct the inability to style clickable types in iOS and Safari. 237 | 2. Remove default button styles. 238 | */ 239 | 240 | button, 241 | [type='button'], 242 | [type='reset'], 243 | [type='submit'] { 244 | -webkit-appearance: button; 245 | /* 1 */ 246 | background-color: transparent; 247 | /* 2 */ 248 | background-image: none; 249 | /* 2 */ 250 | } 251 | 252 | /* 253 | Use the modern Firefox focus style for all focusable elements. 254 | */ 255 | 256 | :-moz-focusring { 257 | outline: auto; 258 | } 259 | 260 | /* 261 | Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) 262 | */ 263 | 264 | :-moz-ui-invalid { 265 | box-shadow: none; 266 | } 267 | 268 | /* 269 | Add the correct vertical alignment in Chrome and Firefox. 270 | */ 271 | 272 | progress { 273 | vertical-align: baseline; 274 | } 275 | 276 | /* 277 | Correct the cursor style of increment and decrement buttons in Safari. 278 | */ 279 | 280 | ::-webkit-inner-spin-button, 281 | ::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /* 286 | 1. Correct the odd appearance in Chrome and Safari. 287 | 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type='search'] { 291 | -webkit-appearance: textfield; 292 | /* 1 */ 293 | outline-offset: -2px; 294 | /* 2 */ 295 | } 296 | 297 | /* 298 | Remove the inner padding in Chrome and Safari on macOS. 299 | */ 300 | 301 | ::-webkit-search-decoration { 302 | -webkit-appearance: none; 303 | } 304 | 305 | /* 306 | 1. Correct the inability to style clickable types in iOS and Safari. 307 | 2. Change font properties to `inherit` in Safari. 308 | */ 309 | 310 | ::-webkit-file-upload-button { 311 | -webkit-appearance: button; 312 | /* 1 */ 313 | font: inherit; 314 | /* 2 */ 315 | } 316 | 317 | /* 318 | Add the correct display in Chrome and Safari. 319 | */ 320 | 321 | summary { 322 | display: list-item; 323 | } 324 | 325 | /* 326 | Removes the default spacing and border for appropriate elements. 327 | */ 328 | 329 | blockquote, 330 | dl, 331 | dd, 332 | h1, 333 | h2, 334 | h3, 335 | h4, 336 | h5, 337 | h6, 338 | hr, 339 | figure, 340 | p, 341 | pre { 342 | margin: 0; 343 | } 344 | 345 | fieldset { 346 | margin: 0; 347 | padding: 0; 348 | } 349 | 350 | legend { 351 | padding: 0; 352 | } 353 | 354 | ol, 355 | ul, 356 | menu { 357 | list-style: none; 358 | margin: 0; 359 | padding: 0; 360 | } 361 | 362 | /* 363 | Reset default styling for dialogs. 364 | */ 365 | 366 | dialog { 367 | padding: 0; 368 | } 369 | 370 | /* 371 | Prevent resizing textareas horizontally by default. 372 | */ 373 | 374 | textarea { 375 | resize: vertical; 376 | } 377 | 378 | /* 379 | 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 380 | 2. Set the default placeholder color to the user's configured gray 400 color. 381 | */ 382 | 383 | input::-moz-placeholder, textarea::-moz-placeholder { 384 | opacity: 1; 385 | /* 1 */ 386 | color: #9ca3af; 387 | /* 2 */ 388 | } 389 | 390 | input::placeholder, 391 | textarea::placeholder { 392 | opacity: 1; 393 | /* 1 */ 394 | color: #9ca3af; 395 | /* 2 */ 396 | } 397 | 398 | /* 399 | Set the default cursor for buttons. 400 | */ 401 | 402 | button, 403 | [role="button"] { 404 | cursor: pointer; 405 | } 406 | 407 | /* 408 | Make sure disabled buttons don't get the pointer cursor. 409 | */ 410 | 411 | :disabled { 412 | cursor: default; 413 | } 414 | 415 | /* 416 | 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 417 | 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) 418 | This can trigger a poorly considered lint error in some tools but is included by design. 419 | */ 420 | 421 | img, 422 | svg, 423 | video, 424 | canvas, 425 | audio, 426 | iframe, 427 | embed, 428 | object { 429 | display: block; 430 | /* 1 */ 431 | vertical-align: middle; 432 | /* 2 */ 433 | } 434 | 435 | /* 436 | Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) 437 | */ 438 | 439 | img, 440 | video { 441 | max-width: 100%; 442 | height: auto; 443 | } 444 | 445 | /* Make elements with the HTML hidden attribute stay hidden by default */ 446 | 447 | [hidden] { 448 | display: none; 449 | } 450 | 451 | *, ::before, ::after{ 452 | --tw-border-spacing-x: 0; 453 | --tw-border-spacing-y: 0; 454 | --tw-translate-x: 0; 455 | --tw-translate-y: 0; 456 | --tw-rotate: 0; 457 | --tw-skew-x: 0; 458 | --tw-skew-y: 0; 459 | --tw-scale-x: 1; 460 | --tw-scale-y: 1; 461 | --tw-pan-x: ; 462 | --tw-pan-y: ; 463 | --tw-pinch-zoom: ; 464 | --tw-scroll-snap-strictness: proximity; 465 | --tw-gradient-from-position: ; 466 | --tw-gradient-via-position: ; 467 | --tw-gradient-to-position: ; 468 | --tw-ordinal: ; 469 | --tw-slashed-zero: ; 470 | --tw-numeric-figure: ; 471 | --tw-numeric-spacing: ; 472 | --tw-numeric-fraction: ; 473 | --tw-ring-inset: ; 474 | --tw-ring-offset-width: 0px; 475 | --tw-ring-offset-color: #fff; 476 | --tw-ring-color: rgb(59 130 246 / 0.5); 477 | --tw-ring-offset-shadow: 0 0 #0000; 478 | --tw-ring-shadow: 0 0 #0000; 479 | --tw-shadow: 0 0 #0000; 480 | --tw-shadow-colored: 0 0 #0000; 481 | --tw-blur: ; 482 | --tw-brightness: ; 483 | --tw-contrast: ; 484 | --tw-grayscale: ; 485 | --tw-hue-rotate: ; 486 | --tw-invert: ; 487 | --tw-saturate: ; 488 | --tw-sepia: ; 489 | --tw-drop-shadow: ; 490 | --tw-backdrop-blur: ; 491 | --tw-backdrop-brightness: ; 492 | --tw-backdrop-contrast: ; 493 | --tw-backdrop-grayscale: ; 494 | --tw-backdrop-hue-rotate: ; 495 | --tw-backdrop-invert: ; 496 | --tw-backdrop-opacity: ; 497 | --tw-backdrop-saturate: ; 498 | --tw-backdrop-sepia: ; 499 | } 500 | 501 | ::backdrop{ 502 | --tw-border-spacing-x: 0; 503 | --tw-border-spacing-y: 0; 504 | --tw-translate-x: 0; 505 | --tw-translate-y: 0; 506 | --tw-rotate: 0; 507 | --tw-skew-x: 0; 508 | --tw-skew-y: 0; 509 | --tw-scale-x: 1; 510 | --tw-scale-y: 1; 511 | --tw-pan-x: ; 512 | --tw-pan-y: ; 513 | --tw-pinch-zoom: ; 514 | --tw-scroll-snap-strictness: proximity; 515 | --tw-gradient-from-position: ; 516 | --tw-gradient-via-position: ; 517 | --tw-gradient-to-position: ; 518 | --tw-ordinal: ; 519 | --tw-slashed-zero: ; 520 | --tw-numeric-figure: ; 521 | --tw-numeric-spacing: ; 522 | --tw-numeric-fraction: ; 523 | --tw-ring-inset: ; 524 | --tw-ring-offset-width: 0px; 525 | --tw-ring-offset-color: #fff; 526 | --tw-ring-color: rgb(59 130 246 / 0.5); 527 | --tw-ring-offset-shadow: 0 0 #0000; 528 | --tw-ring-shadow: 0 0 #0000; 529 | --tw-shadow: 0 0 #0000; 530 | --tw-shadow-colored: 0 0 #0000; 531 | --tw-blur: ; 532 | --tw-brightness: ; 533 | --tw-contrast: ; 534 | --tw-grayscale: ; 535 | --tw-hue-rotate: ; 536 | --tw-invert: ; 537 | --tw-saturate: ; 538 | --tw-sepia: ; 539 | --tw-drop-shadow: ; 540 | --tw-backdrop-blur: ; 541 | --tw-backdrop-brightness: ; 542 | --tw-backdrop-contrast: ; 543 | --tw-backdrop-grayscale: ; 544 | --tw-backdrop-hue-rotate: ; 545 | --tw-backdrop-invert: ; 546 | --tw-backdrop-opacity: ; 547 | --tw-backdrop-saturate: ; 548 | --tw-backdrop-sepia: ; 549 | } 550 | 551 | .absolute{ 552 | position: absolute; 553 | } 554 | 555 | .relative{ 556 | position: relative; 557 | } 558 | 559 | .right-5{ 560 | right: 1.25rem; 561 | } 562 | 563 | .top-5{ 564 | top: 1.25rem; 565 | } 566 | 567 | .mb-5{ 568 | margin-bottom: 1.25rem; 569 | } 570 | 571 | .flex{ 572 | display: flex; 573 | } 574 | 575 | .h-screen{ 576 | height: 100vh; 577 | } 578 | 579 | .w-full{ 580 | width: 100%; 581 | } 582 | 583 | .items-center{ 584 | align-items: center; 585 | } 586 | 587 | .justify-center{ 588 | justify-content: center; 589 | } 590 | 591 | .text-center{ 592 | text-align: center; 593 | } 594 | 595 | .text-6xl{ 596 | font-size: 3.75rem; 597 | line-height: 1; 598 | } 599 | 600 | .text-base{ 601 | font-size: 1rem; 602 | line-height: 1.5rem; 603 | } 604 | 605 | .font-bold{ 606 | font-weight: 700; 607 | } 608 | 609 | .font-medium{ 610 | font-weight: 500; 611 | } 612 | 613 | .text-gray-500{ 614 | --tw-text-opacity: 1; 615 | color: rgb(107 114 128 / var(--tw-text-opacity)); 616 | } 617 | 618 | .text-gray-800{ 619 | --tw-text-opacity: 1; 620 | color: rgb(31 41 55 / var(--tw-text-opacity)); 621 | } 622 | 623 | body { 624 | font-family: 'Urbanist', sans-serif; 625 | } --------------------------------------------------------------------------------