-
-
Notifications
You must be signed in to change notification settings - Fork 77
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Inkline with TailwindCSS #277
Comments
HI ! |
Hey! I'll look into this today and provide an example. :) Cheers! |
Alright guys, so to use Inkline together with TailwindCSS you'll need to keep two separate stylesheets. One Here's how they look like in my setup: main.js import { createApp } from 'vue';
import App from './App.vue';
import { Inkline, components } from '@inkline/inkline';
import "./inkline.scss";
import "./tailwind.css";
const app = createApp(App);
app.use(Inkline, {
components
});
app.mount('#app'); inkline.scss @import '@inkline/inkline/css/functions';
@import '@inkline/inkline/css/mixins';
@import '@inkline/inkline/css/icons';
@import '@inkline/inkline/css/variables';
@import '@inkline/inkline/css/variables/css';
// The following global styles interfere with Tailwind
// @import '@inkline/inkline/css/utilities';
// @import '@inkline/inkline/css/core';
// Do your inkline variable changes here tailwind.css @tailwind base;
@tailwind components;
@tailwind utilities; That's it! Let me know if this works for you. If not, we can dive deeper into the specific issue. Enjoy! :) |
Hi @alexgrozav, I want to use Inkline + Nuxt 3 with tailwind. Example below doesn`t work:. What do you think ? assets/styles/vendor/inkline.scss@import "@inkline/inkline/css/functions";
@import "@inkline/inkline/css/mixins";
@import "@inkline/inkline/css/icons";
@import "@inkline/inkline/css/variables";
@import "@inkline/inkline/css/variables/css"; assets/styles/vendor/tailwind.css@tailwind base;
@tailwind components;
@tailwind utilities; assets/styles/style.scss@forward "vendor/inkline.scss";
@forward "vendor/tailwind.css"; nuxt.config.tsimport { defineNuxtConfig } from "nuxt3";
export default defineNuxtConfig({
typescript: {
shim: false,
strict: true
},
meta: {
title: "Nuxt 3",
meta: [
{ charset: "utf-8" },
{
name: "viewport",
content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
},
{
hid: "description",
name: "description",
content: "Nuxt 3"
},
{ "http-equiv": "cache-control", content: "no-cache" },
{ "http-equiv": "expires", content: "0" }
],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }]
},
modules: ["@nuxtjs/tailwindcss", ["@pinia/nuxt", { disableVuex: true }]],
tailwindcss: {
viewer: false
},
css: ["~/assets/styles/style.scss"]
}); inkline-plugin.tsimport { Inkline, components } from "@inkline/inkline";
export default defineNuxtPlugin(ctx => {
ctx.vueApp.use(Inkline, { components });
}); After TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".vue" for /home/tripplicate/Документы/Projects/Personal/nuxt3-application/node_modules/@inkline/inkline/components/IAlert/index.vue |
export default defineNuxtPlugin(ctx => { ^ export default defineNuxtPlugin((NuxtApp) => { https://v3.nuxtjs.org/guide/going-further/internals#the-nuxtapp-interface Might need this package as well , not sure.. '@css-render/vue3-ssr', export default defineNuxtConfig({ |
I would say that the inability to work with Tailwind CSS may deter a significant number of people from accessing this project |
@howard-tzw Inkline now has tailwind-style utility classes using the Unocss preset: https://www.inkline.io/docs/add-ons/unocss Would this be a good alternative or do you explicitly want to use TailwindCSS? I can work on a guide if necessary. |
One alternative that I didn't see mentioned above, maybe I missed it, but you can consider working the other way round. Tailwind has the ability to prefix all your Tailwind classes with a prefix of your choosing, ie: You also have the ability to disable default core plugins if they collide and can't be resolved by using the prefix. For instance one of my clients has a huge enterprise app that was built in Bootstrap 3, and we simply don't have the budget to resolve that technical debt all at once, so I've been incrementally replacing the Bootstrap with Tailwind. I had to disable a couple core plugins and skip the optional forms plugin, and I added the prefix: 'tw-' and now I have access to all Tailwind classes, minus the ones removed of course. It will be a chore to go through and prefix all those classes across all your files, but I think it's probably a workable solution if you're willing to take the time. You can always try it on a small scale and see if works for you. Don't forget you can also map Inkline css-variables to Tailwind design tokens. I'm not sure if Tailwind has such an extensive set of tokens as Inkline does but I know they are in there. |
Hi!
I am a user of TailwindCSS and I have currently setup most of my UI using Tailwindcss. However, some parts of my code seem silly to use Tailwind for and not something like Inkline.
An example of my current code for a button is:
With inkline, this looks like this:
On top of this, Inkline adds a bunch of functionality such as a loading spinner.
I thought, why not use both? Tailwindcss where I do custom styling and Inkline for repetitive components, such as buttons. However, adding Inkline also adds a bunch of default styles, that messes with my current design, such as hover effects on links.
Is there a way to make these two frameworks co-exist without interfering each other?
The text was updated successfully, but these errors were encountered: