Comments (2)
@lexxyungcarter That doesn't need to be a problem. All the classes are configurable. You can even use this library with another CSS framework.
Let me explain: Most of the components (especially the complex ones) already have a couple of default tailwind classes, the idea is to make it easy for devs to replace a few classes, but still, you can override all the default classes.
Consider the toggle, for example, if you see the default classes (https://www.vue-tailwind.com/docs/toggle#default-fixed-classes) they are simple tailwind classes, but that doesn't mean you can't override them when configuring your component:
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
const settings = {
TToggle: {
fixedClasses: {
// *****I added the `tw-` prefix just to the first line as an example******
wrapper: 'tw-relative tw-inline-flex tw-flex-shrink-0 tw-cursor-pointer tw-transition-colors ease-in-out tw-duration-200',
// Need to do the same with the rest
wrapperChecked: 'relative inline-flex flex-shrink-0 cursor-pointer transition-colors ease-in-out duration-200',
button: 'inline-block absolute transform translate-x-0 transition ease-in-out duration-200',
buttonChecked: 'inline-block absolute transform translate-x-full transition ease-in-out duration-200',
checkedPlaceholder: 'inline-block',
uncheckedPlaceholder: 'inline-block'
},
classes: {
wrapper: 'bg-gray-200 focus:outline-none focus:shadow-outline rounded-full border-2 border-transparent',
wrapperChecked: 'bg-blue-500 focus:outline-none focus:shadow-outline rounded-full border-2 border-transparent',
button: 'h-5 w-5 rounded-full bg-white shadow flex items-center justify-center text-gray-400 text-xs',
buttonChecked: 'h-5 w-5 rounded-full bg-white shadow flex items-center justify-center text-blue-500 text-xs',
checkedPlaceholder: 'rounded-full w-5 h-5 flex items-center justify-center text-gray-500 text-xs',
uncheckedPlaceholder: 'rounded-full w-5 h-5 flex items-center justify-center text-gray-500 text-xs'
},
}
}
Vue.use(VueTailwind, settings)
^ That was a complex one but with a button is more simple:
import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
const settings = {
TButton: {
fixedClasses: 'tw-focus:outline-none tw-focus:shadow-outline tw-inline-flex tw-items-center tw-transition tw-ease-in-out tw-duration-150',
classes: 'tw-text-white tw-bg-blue-600 tw-hover:bg-blue-500 tw-focus:border-blue-700 tw-active:bg-blue-700 tw-text-sm tw-font-medium tw-border tw-border-transparent tw-px-3 tw-py-2 tw-rounded-md',
}
}
Vue.use(VueTailwind, settings)
Check the Theming docs for more info :
https://www.vue-tailwind.com/docs/theming
from vue-tailwind.
Thank you for your quick reply. I've tried playing around with tweaks here and there, but to no avail. I'll try out this approach.
Cheers.
PS: Can there be a way of merging the package's
tailwind.config.js
with our customtailwind.config.js
? Like the waylaravel mix
orwebpack
does? Just thinking...
from vue-tailwind.
Related Issues (20)
- TRichSelect - Buttons in DropdownUp and DropdownDown do not register click in Safari
- How to display Datepicker only year?
- [help wanted] t-rich-select grouping options HOT 1
- How to blur T-rich-select dropdown upon select
- Dropdown without JavaScript
- <router-link>'s tag prop is deprecated
- Pagination in Rich Select HOT 3
- Semantic TCard (and others)
- not working with vueJS3
- Checkbox not working, value never changes HOT 2
- 🚨 [Important]: project status
- Header Modal Customize
- Variants don't work
- How use t-dropdown in file .tsx HOT 1
- Build for production with Vite? HOT 9
- Rich Select multiple placeholder not rendering
- Time in french
- Can't see search results in TRichSelect when using the fetchOptions method HOT 1
- Pass additional variable to fetchOptions HOT 2
- Rich Select Selected Label for Multiple
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-tailwind.