Show Tailwind CSS Breakpoints in Nuxtjs when using the tailwindcss-module
Note: This is a simple fork of the nuxt-breaky module. It should look and act pretty much the same as the original. Minor changes include removing the node-sass
dependency to make the module usable with node.js >= 16 and adding a landmark aria-role
attribute to the div.current-breakpoint element.
breaky helps you create your responsive designs faster. It extends the awesome tailwindcss-module. breaky reads your defined breakpoints within your tailwind config and shows the currently active breakpoint based on your browser window width.
The plugin will only be loaded during development mode and does not interfere with your production build.
Make sure tailwindcss: ^5.0.0
and @nuxt/postcss8: ^1.1.3
(or higher) are installed.
- Add
nuxt-tailwind-breakpoints
as a dev-dependency to your project
yarn add nuxt-tailwind-breakpoints --dev
# or npm install nuxt-tailwind-breakpoints --save-dev
- Add
nuxt-tailwind-breakpoints
to thebuildModules
section ofnuxt.config.js
NOTE: Use the modules
section if you are using Nuxt older than v2.9
. More Info
{
buildModules: [
// Simple usage
'nuxt-tailwind-breakpoints',
// With options
[
'nuxt-tailwind-breakpoints',
{
enabled: true,
enableInProd: false,
colorScheme: 'auto',
position: 'bottomRight',
configPath: '~~/tailwind.config.js',
}
]
]
}
The breaky module automatically adds the breaky plugin when in development
mode.
No need to register or include it anywhere else.
You can pass options to the breaky using both the module options and the Nuxt config way.
{
buildModules: {
['nuxt-tailwind-breakpoints', { /* module options */ }]
},
breaky: {
/* module options */
}
}
Option | Type | Default | Options | Description |
---|---|---|---|---|
enabled |
Boolean |
true |
true | false |
Enable/Disable breaky |
enableInProd |
Boolean |
false |
true | false |
Enable breaky in production (overrides the enabled option; Please be aware this adds ~19.5KB (~3.5KB) to the client bundle size. More Info) |
colorScheme |
String |
auto |
'auto' | 'light' | 'dark' |
Switch between different color schemes |
position |
String |
'bottomRight' |
'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' |
Breakys starting position |
parseRaw |
Boolean |
false |
true | false |
(Experimental) Enable parsing a screen's raw property and use a query's min-width pixel value if it specifies the device type as screen or doesn't specify device type at all. For example, lg: {raw: print, (min-width: 1024px)} would set lg to 1024 |
configPath |
String |
'~~/tailwind.config.js' |
any valid path ponting to the file | Path to the tailwindcss config file |
breakpoints |
Object |
undefined |
An object representing all the breakpoints you'd like to identify in your configuration. If provided, it is used instead of screens from tailwind config |
- Clone this repository
- Install dependencies using
yarn install
- Start development server using
yarn dev
yarn release
npm publish
Copyright (c) teamnovu