DOCSEARCHbyAlgolia
Submit Docs

@nuxtjs/tailwindcss

repository·main·Indexed 23 days ago

https://github.com/nuxt-modules/tailwindcss

A Nuxt module providing seamless integration for Tailwind CSS, allowing the use of utility classes in Nuxt applications with zero configuration. Includes support for extending Tailwind configuration via Nuxt hooks, such as tailwindcss:sources:extend, and provides a `tw` autocomplete utility to enable Tailwind CSS IntelliSense for class strings and template literals.

Tokens
489
Snippets
2
Records
6
Agent score
84%

What's inside @nuxtjs/tailwindcss

  2. Install @nuxtjs/tailwindcss using a dependency manager

    main

    You can manually install the module using your preferred package manager and then register it in your Nuxt configuration file.

    # Using pnpm
pnpm add --save-dev @nuxtjs/tailwindcss

# Using yarn
yarn add --dev @nuxtjs/tailwindcss

# Using npm
npm install --save-dev @nuxtjs/tailwindcss

  3. Install @nuxtjs/tailwindcss using the Nuxt CLI

    main

    The fastest way to add Tailwind CSS support to your Nuxt project is by using the Nuxt CLI module command. This automatically handles the installation and registration of the module.

    npx nuxi@latest module add tailwindcss

  4. Extend Tailwind CSS sources via the tailwindcss:sources:extend hook

    main

    You can extend the list of files that Tailwind CSS scans for classes by using the tailwindcss:sources:extend hook. This hook provides an array of source objects that you can modify. Each object in the array contains a type and a source string.

    Use this hook within your Nuxt configuration or a Nuxt plugin to add custom directories or files to the Tailwind scanning process.

  5. Use the `tw` autocomplete utility

    main

    The module provides an autocompleteUtil which is automatically imported and aliased as tw. You can use this utility in your project to assist with Tailwind CSS related logic or autocompletion tasks.

    Access it directly in your components or composables as tw.

  6. Use autocompleteUtil for Tailwind class autocomplete

    main
    The autocompleteUtil function is a utility used to wrap Tailwind class strings or template literals. This allows the Tailwind CSS IntelliSense engine (or other autocomplete tools) to recognize these strings as Tailwind classes, enabling autocomplete suggestions within your code.