Setting Up TailwindCSS, Shadcn-Vue, and Automatic Component Imports

In this lesson, we'll install and configure Shadcn-Vue and TailwindCSS. We'll then set up automatic imports for all of our local Vue components.

Published
Aug 20, 24
Duration
16m 4s

Developer, dog lover, and burrito eater. Currently teaching AdonisJS, a fully featured NodeJS framework, and running Adocasts where I post new lessons weekly. Professionally, I work with JavaScript, .Net C#, and SQL Server.

Adocasts

Burlington, KY

Get the Code

Download or explore the source code for this lesson on GitHub

Repository

⚠️ Quick Note

TailwindCSS released v4 on Jan 22nd, 2025 which contains a few breaking changes to the installation process. At this point, many plugins have not yet been updated for v4. For Shadcn-Vue to continue working as intended throughout this series it is recommended, for now, to stick with v3 while following along.

When installing TailwindCSS, please target v3, as shown below.

npm install -D tailwindcss@3 autoprefixer
Copied!

⏳ Chapters

00:00 - Running Our Project
00:50 - Installing Shadcn-Vue & TailwindCSS
04:20 - Configuring Shadcn-Vue
07:50 - Configuring TailwindCSS
09:20 - Installing Our First Shadcn-Vue Component
10:30 - Testing Our Button Component
11:28 - Automatic Component Registration
14:07 - TypeScript Support on Automatically Imported Components

Documentation

VSCode Extension

Shadcn-Vue

Join The Discussion! (10 Comments)

Please sign in or sign up for free to join in on the dicussion.

  1. Commented 1 month ago

    Im following along using SolidJS, but got stuck at the auto imports package as it seems to be a vue specific library - how may i get this working with a SolidJS setup? Thanks!

    1

    Please sign in or sign up for free to reply

    1. Commented 1 month ago

      Hi yunus! Apologies for the delayed response! I'm not familiar with the SolidJS ecosystem in the slightest, so I unfortunately do not know. You might have luck using unplugin-auto-import, that is what unplugin-vue-components utilizes, but I'm not certain whether it'll work nor how it'd need to be configured.

      1

      Please sign in or sign up for free to reply

      1. Commented 1 month ago

        Not a problem brother, appreciate the work you're putting into Adonis :). The potential is huge imo and using Inertia fullstack development just makes sense compared to meta frameworks.
        I decided to stick to React until SolidJS matures a bit more. One other thing i would like to suggest while here is; could we get more information about deployment options using Adonis? Cleavr was looking promising, but i would like to do server management myself on AWS for example(EC2 or ECS/Fargate if possible)

        1

        Please sign in or sign up for free to reply

        1. Commented 1 month ago

          Thank you, yunus! I very much agree in regards to using Inertia over meta frameworks when you need the full stack! 😊

          As for deployment, please see my comment here. The TLDR is it's coming, but not something I do myself all that often. So I just need to dedicate some time to do proper R&D to do some lessons justice. 😁

          0

          Please sign in or sign up for free to reply

  2. Commented 1 month ago

    The Vue ecosystem is fantastic. I’ve also set up Prettier with the following plugins:

    • prettier-plugin-tailwindcss

    • prettier-plugin-organize-attributes

    • prettier-plugin-organize-imports

    This setup ensures consistent code formatting while keeping Tailwind classes, attributes, and imports perfectly organized.

    1

    Please sign in or sign up for free to reply

    1. Commented 1 month ago

      Yeah, I absolutely love Vue & it's ecosystem!! Thank you for sharing these plugins' gribbl!! 😊

      0

      Please sign in or sign up for free to reply

  3. Commented 1 month ago

    @tomgobich I followed your instructions to have the unplugin package to autoimport my shadcn-vue components. It works with simple components like buttons, but more complicated ones, such as resizable needs radix-vue, and I had trouble setting it up the vite.config.js to resolve these more complex components. Do you have nay suggestions?

    1

    Please sign in or sign up for free to reply

    1. Commented 1 month ago

      Hi, csaba-kiss!! You can try registering radix-vue's unplugin-vue-components plugin to see if that helps. The caveat here is you'll likely need to use the original name defined in radix-vue, rather than renamed components from shadcn-vue.

      For example, to auto-import, you'd probably need to use the name "SplitterPanel" rather than shadcn-vue's "ResizablePanel."

      I noticed a similar issue when rebuilding the Adocasts CMS and opted to import the components directly instead.

      import Components from 'unplugin-vue-components/vite'
      import RadixVueResolver from 'radix-vue/resolver'
      
      export default defineConfig({
        plugins: [
          vue(),
          Components({
            dts: true,
            resolvers: [
              RadixVueResolver()
      
              // RadixVueResolver({
              //   prefix: '' // use the prefix option to add Prefix to the imported components
              // })
            ],
          }),
        ],
      })
      Copied!
      0

      Please sign in or sign up for free to reply

  4. Commented 21 days ago

    Tailwindcss 4.0 is released and it does not work out of the box. So to follow this setup, you need to use tailwindcss 3.x.

    1

    Please sign in or sign up for free to reply

    1. Commented 20 days ago

      Yes, thank you very much cinqi! When v4 launched I added a note to the top of this lesson, but failed to realize the plugin Shadcn-Vue uses likely isn't up-to-date with that yet. I've updated my note to recommend sticking to v3 for now when following this series.

      I also have a patch to the video being rendered as we speak, which I should be able to get updated tomorrow.

      0

      Please sign in or sign up for free to reply