https://github.com/dtinth/tailwind-search
Having trouble memorizing all the utility classes in Tailwind? Remember the CSS code, but did not remember which is the corresponding Tailwind CSS utility class? Search for it here!
https://github.com/dtinth/tailwind-search
tailwindcss vue
Last synced: 6 months ago
JSON representation
Having trouble memorizing all the utility classes in Tailwind? Remember the CSS code, but did not remember which is the corresponding Tailwind CSS utility class? Search for it here!
- Host: GitHub
- URL: https://github.com/dtinth/tailwind-search
- Owner: dtinth
- Created: 2020-04-04T21:04:31.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-03-26T11:09:46.000Z (almost 4 years ago)
- Last Synced: 2024-11-18T11:25:54.391Z (about 1 year ago)
- Topics: tailwindcss, vue
- Language: CSS
- Homepage: https://tailwind.spacet.me
- Size: 1.12 MB
- Stars: 52
- Watchers: 3
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @dtinth’s Tailwind CSS Class Search
Having trouble memorizing all the utility classes in Tailwind? Remembered the CSS code, but did not remember which is the corresponding Tailwind CSS utility class? [Search for it here!](https://tailwind.spacet.me/)
This little web application parses the Tailwind CSS file right from `unpkg.com` using [css-tree](https://www.npmjs.com/package/css-tree), and generates a searchable index that lets you search for a utility class’s name, if you know the generated CSS code you want. The web app is built with [Vue.js](https://vuejs.org/), fast fuzzy-searching is provided by [fuzzysort](https://www.npmjs.com/package/fuzzysort) and the result list is lazily rendered with help of [vue-virtual-scroller](https://www.npmjs.com/package/vue-virtual-scroller).
[](https://tailwind.spacet.me/)
I made this application because I am often confused by Tailwind CSS’ naming of classes.
- When do I use `font-`? e.g. `font-bold`
- When do I use `text-`? e.g. `text-lg` even though it’s `font-size`
- When do I use _neither?_ e.g. `italic`
- Most of the time I know what kind of CSS code I want, but couldn't correctly recall the class name.
- This app also lets you check whether a class is available in Tailwind’s default build. (When I prototype apps, I like to use the Tailwind CSS default builds straight from the CDN.)
## Development
- **No build system needed.** Just clone the Git repository, open `index.html` file in your browser. Edit, save and refresh. Append `?dev=1` to URL to load full Tailwind CSS file.
## Usage in Node
```js
const fs = require('fs')
const tailwindCssClassSearch = require('@dtinth/tailwind-css-class-search')
// Read CSS file
const css = fs.readFileSync(require.resolve('tailwindcss/dist/tailwind.css'))
// Generate a search index
const searchIndex = await tailwindCssClassSearch(css)
// Inspect all entries
searchIndex.entries // => Array(12526)
// Search
searchIndex.search('font-size') // Array(50)
```
## Preparing for deployment
Since the full generated tailwind is 1mb large, we use [purgecss](https://purgecss.com/CLI) to remove unused selectors and reduce the CSS file size to 20kb.
```
yarn build
```
## VS Code integration
See the [`contrib/vscode` folder](./contrib/vscode) for more info on experimental VS Code integration.