Using Tailwind CSS in your Nuxt project is only one command away ✨
@nuxtjs/tailwindcss
dependency to your project:yarn add --dev @nuxtjs/tailwindcss
modules
section in your nuxt.config
:export default { modules: ['@nuxtjs/tailwindcss']}
tailwind.config.js
by running:npx tailwindcss init
When running nuxt dev
, this module will look for these files:
./assets/css/tailwind.css
./tailwind.config.{js,ts}
If they don't exist, the module will inject a basic configuration for each one so you don't have to create these files.
Learn more about overwriting the Tailwind configuration in the Tailwind Config section.
Officially Tailwind config files are plain JavaScript, however with this module, you can optionally use a TypeScript file for your config.
To do so, rename tailwind.config.js
to tailwind.config.ts
and use the types from the tailwindcss module.
import { Config } from 'tailwindcss'export default <Config> { theme: { extend: {} },}
You can customize the module's behavior by using the tailwindcss
property in nuxt.config
:
export default { tailwindcss: { // Options }}
See the module options.