Inkline with TailwindCSS

[madsh93]

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:

        <button
          type="button"
          class="inline-flex items-center px-4 py-2 mt-4 text-sm font-medium text-white border border-transparent rounded-md shadow-sm bg-er-600 hover:bg-er-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-er-500"
        >
          Create new program

          <svg
            class="w-5 h-5 ml-2 -mr-1"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
        </button>

With inkline, this looks like this:

        <i-button
          >Create new program

          <svg
            class="w-5 h-5 ml-2 -mr-1"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
        </i-button>

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?

[tripplicate]

HI !
Did you find answer ?

[alexgrozav]

Hey! I'll look into this today and provide an example. :) Cheers!

[alexgrozav]

Alright guys, so to use Inkline together with TailwindCSS you'll need to keep two separate stylesheets. One inkline.scss and one tailwind.css, which you both import in your main.js file.

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! :)

[tripplicate]

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.ts

import { 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.ts

import { Inkline, components } from "@inkline/inkline";

export default defineNuxtPlugin(ctx => {
  ctx.vueApp.use(Inkline, { components });
});

After npm run dev I see in konsole:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".vue" for /home/tripplicate/Документы/Projects/Personal/nuxt3-application/node_modules/@inkline/inkline/components/IAlert/index.vue
at new NodeError (node:internal/errors:372:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:80:11)
at defaultGetFormat (node:internal/modules/esm/get_format:122:38)
at defaultLoad (node:internal/modules/esm/load:21:20)
at ESMLoader.load (node:internal/modules/esm/loader:407:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:326:22)
at new ModuleJob (node:internal/modules/esm/module_job:66:26)
at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:345:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:304:34)
at async ModuleWrap. (node:internal/modules/esm/module_job:82:21) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
node[6117]: ../src/node_file-inl.h:160:node::fs::FSReqPromise::~FSReqPromise() [with AliasedBufferT = node::AliasedBufferBase<double, v8::Float64Array>]: Assertion `finished_' failed.
1: 0x55593b983ad5 node::Abort() [node]
2: 0x55593b983e24 node::Assert(node::AssertionInfo const&) [node]
3: 0x55593b97dc2d [node]
4: 0x55593b98895f node::fs::FSReqAfterScope::Clear() [node]
5: 0x55593b9889e5 node::fs::FSReqAfterScope::~FSReqAfterScope() [node]
6: 0x55593b9890b8 node::fs::AfterOpenFileHandle(uv_fs_s*) [node]
7: 0x7f3497591522 [/usr/lib/libuv.so.1]
8: 0x7f349758892d [/usr/lib/libuv.so.1]
9: 0x7f34975a4d0e [/usr/lib/libuv.so.1]
10: 0x7f349758e438 uv_run [/usr/lib/libuv.so.1]
11: 0x55593b8ae2bf node::SpinEventLoop(node::Environment*) [node]
12: 0x55593ba5ea64 node::worker::Worker::Run() [node]
13: 0x55593ba5effb [node]
14: 0x7f349674d5c2 [/usr/lib/libc.so.6]
15: 0x7f34967d2584 clone [/usr/lib/libc.so.6]

[vinksz]

export default defineNuxtPlugin(ctx => {
ctx.vueApp.use(Inkline, { components });
});

^

export default defineNuxtPlugin((NuxtApp) => {
NuxtApp.vueApp.use(Inkline, { components });
});

https://v3.nuxtjs.org/guide/going-further/internals#the-nuxtapp-interface

Might need this package as well , not sure.. '@css-render/vue3-ssr',
in nuxt config

export default defineNuxtConfig({
build: {
transpile: [
'@css-render/vue3-ssr',]

[howard-tzw]

I would say that the inability to work with Tailwind CSS may deter a significant number of people from accessing this project

[alexgrozav]

@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.

[secondmanveran]

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: tw-mt-4 etc.

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.