shadcn-ui/ui codebase analysis: How does shadcn-ui CLI work? — Part 2.5
Tags: javascript, opensource, nextjs, shadcnui
Published: 2024-07-03 20:50:24

I wanted to find out how shadcn-ui CLI works. In this article, I discuss the code used to build the shadcn-ui/ui CLI.

In part 2.4, we looked at function getProjectType that returns the type of next project you are trying to install shadcn-ui via init command.

Let’s move on to the next line of code.

![](https://media.licdn.com/dms/image/D4E12AQF-bqeNP5uugw/article-inline_image-shrink_1500_2232/0/1720039486490?e=1725494400&v=beta&t=al4ER2-Tvmn9POImZYBgTYxARCfx8NHNwPVHMH3e-6E)

After finding out the projectType, the next step is to get the tailwindCssFile.

```js
const tailwindCssFile = await getTailwindCssFile(cwd)
```

[getTailwindCssFile](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L135) is imported from [ui/packages/cli/src/utils/get-project-info.ts](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L135) and this function returns the main css file. Let’s find out how.

```js
export async function getTailwindCssFile(cwd: string) {
  const files = await fg.glob("\*\*/\*.css", {
    cwd,
    deep: 3,
    ignore: PROJECT\_SHARED\_IGNORE,
  })

  if (!files.length) {
    return null
  }

  for (const file of files) {
    const contents = await fs.readFile(path.resolve(cwd, file), "utf8")
    // Assume that if the file contains \`@tailwind base\` it's the main css file.
    if (contents.includes("@tailwind base")) {
      return file
    }
  }

  return null
}
```

fb.glob
-------

```js
const files = await fg.glob("\*\*/\*", {
    cwd,
    deep: 3,
    ignore: PROJECT\_SHARED\_IGNORE,
})
```

Check out the fast-glob docs about the [deep property](https://www.npmjs.com/package/fast-glob#deep).

![](https://media.licdn.com/dms/image/D4E12AQHT81CwfaDzcQ/article-inline_image-shrink_1000_1488/0/1720039486771?e=1725494400&v=beta&t=0ftOPK5Zqyb5wM656H9u0R-6cMBxBxm2EpY5b6gjpH0)

You might be wondering what’s PROJECT\_SHARED\_IGNORE.

Well, PROJECT\_SHARED\_IGNORE is an [array initiated at the top of file](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L24).

![](https://media.licdn.com/dms/image/D4E12AQELbJQUCBa-iA/article-inline_image-shrink_1000_1488/0/1720039486286?e=1725494400&v=beta&t=NYPP-sHczsjz6swM9jadJz2CkcKrWLXVfuYVHUv_zXk)

Check out the docs for [ignore property.](https://www.npmjs.com/package/fast-glob#ignore)

![](https://media.licdn.com/dms/image/D4E12AQEiyM8TrUC3YQ/article-inline_image-shrink_1500_2232/0/1720039486400?e=1725494400&v=beta&t=YghsmuBrHkHMU6vYPDdeW3SpT1_0CukmXFgT4ncOIvE)

How is main css file returned?
------------------------------

```js
for (const file of files) {
    const contents = await fs.readFile(path.resolve(cwd, file), "utf8")
    // Assume that if the file contains \`@tailwind base\` it's the main css file.
    if (contents.includes("@tailwind base")) {
      return file
    }
  }
```

There is a check contents.includes(“@tailwind base”) which is based on an assumption described in a comment.

Conclusion:
-----------

Finding the main css file with tailwind base classes based on an assumption that the content of file includes @tailwind base is clever.

Again, this getTailwindFile also uses fg.glob to get all the files in a given cwd to find the file that contains @tailwind base

I don’t know if I will ever use such an implementation but for now I know that such a thing is possible with fast-glob. Comes handy when you are building a CLI like package.

> _Want to learn how to build shadcn-ui/ui from scratch? Check out_ [_build-from-scratch_](https://tthroo.com/)

About me:
---------

Website: [https://ramunarasinga.com/](https://ramunarasinga.com/)

Linkedin: [https://www.linkedin.com/in/ramu-narasinga-189361128/](https://www.linkedin.com/in/ramu-narasinga-189361128/)

Github: [https://github.com/Ramu-Narasinga](https://github.com/Ramu-Narasinga)

Email: [ramu.narasinga@gmail.com](mailto:ramu.narasinga@gmail.com)

[Build shadcn-ui/ui from scratch](https://tthroo.com/)

References:
-----------

1.  [https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L80](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L80)
2.  [https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L135](https://github.com/shadcn-ui/ui/blob/main/packages/cli/src/utils/get-project-info.ts#L135)