Skip to content

Instantly share code, notes, and snippets.

@valakhosravi
Created May 30, 2023 06:05
Show Gist options
  • Select an option

  • Save valakhosravi/bc1487362a90457c6cd774ceff5ccd45 to your computer and use it in GitHub Desktop.

Select an option

Save valakhosravi/bc1487362a90457c6cd774ceff5ccd45 to your computer and use it in GitHub Desktop.
1. Grid System:
- Replace `.container` with `.container` in Tailwind.
- Replace `.row` with `.flex` in Tailwind.
- Replace `.col-*-*` with `.w-*` in Tailwind, where the asterisks represent the appropriate width classes.
- Update any additional grid-related classes to their respective Tailwind equivalents.
2. Typography:
- Replace heading classes like `.h1`, `.h2`, etc., with `.text-<size>` in Tailwind.
- Replace paragraph classes like `.lead` with `.text-lg` in Tailwind.
- Update text alignment classes, such as `.text-left`, `.text-right`, etc., to their Tailwind equivalents.
3. Buttons:
- Replace button classes like `.btn`, `.btn-primary`, etc., with `.btn`, `.btn-primary`, etc., in Tailwind.
- Modify button styles as per Tailwind's utility classes, such as `.bg-*`, `.text-*`, etc.
- Consider updating button sizes using the `.btn-sm`, `.btn-lg`, etc., classes in Tailwind.
4. Forms:
- Replace form classes like `.form-control`, `.form-group`, etc., with their respective Tailwind classes.
- Update input classes like `.form-control` to `.input`, `.form-select` to `.select`, etc.
- Adjust form layouts and styles using Tailwind's utility classes, such as `.mt-*`, `.p-*`, etc.
5. Navbar:
- Replace navbar classes like `.navbar`, `.navbar-expand-*`, etc., with Tailwind's navbar component and its associated classes.
- Customize the navbar appearance and behavior using Tailwind's utility classes and configuration options.
6. Cards:
- Replace card classes like `.card`, `.card-header`, `.card-body`, etc., with their Tailwind equivalents, such as `.bg-white`, `.p-*`, etc.
- Tailwind provides different utility classes to create card-like components, so explore the documentation for options that suit your needs.
7. Miscellaneous:
- Tailwind offers a wide range of utility classes for spacing, colors, borders, shadows, etc. Replace any Bootstrap classes with the appropriate Tailwind utility classes.
- Take advantage of Tailwind's responsive classes for creating responsive layouts.
- Customize and extend Tailwind's default configuration to match your project's specific requirements.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment