142 lines
2.5 KiB
Markdown
142 lines
2.5 KiB
Markdown
# Tailwind CSS Debug Screens 📱
|
|
|
|
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
|
|
|
|
[Demo](https://joren.co/tailwindcss-debug-screens-demo/)
|
|
|
|
<img src="screenshot.png" width="534">
|
|
|
|
## Install
|
|
|
|
Requires **Tailwind v1.0** or higher.
|
|
|
|
1. Install the plugin:
|
|
|
|
```bash
|
|
npm install tailwindcss-debug-screens --save-dev
|
|
```
|
|
|
|
2. Add it to your `tailwind.config.js` file:
|
|
|
|
```js
|
|
// tailwind.config.js
|
|
module.exports = {
|
|
//...
|
|
plugins: [
|
|
require('tailwindcss-debug-screens'),
|
|
]
|
|
}
|
|
```
|
|
|
|
## Usage
|
|
|
|
Add the class `debug-screens` to your `<body>` tag.
|
|
|
|
```html
|
|
<body class="debug-screens">
|
|
```
|
|
|
|
Make sure the class is only present during development. Here's an example of how you could do that in Craft CMS:
|
|
|
|
```twig
|
|
<body class="{{ devMode ? 'debug-screens' : '' }}">
|
|
```
|
|
|
|
### Customization
|
|
|
|
You can customize this plugin in the `theme.debugScreens` section of your `tailwind.config.js` file.
|
|
|
|
#### Ignore screens
|
|
|
|
To ignore a specific screen (for instance [dark mode](https://tailwindcss.com/docs/dark-mode)), add the screen name to the `ignore` configuration array. `dark` is ignored by default.
|
|
|
|
```js
|
|
// tailwind.config.js
|
|
module.exports = {
|
|
theme: {
|
|
debugScreens: {
|
|
ignore: ['dark'],
|
|
},
|
|
},
|
|
plugins: [
|
|
require('tailwindcss-debug-screens'),
|
|
],
|
|
}
|
|
```
|
|
|
|
#### Position
|
|
|
|
The first item of the position configuration array can be `top` or `bottom`, the second item can be `left` or `right`.
|
|
|
|
```js
|
|
// tailwind.config.js
|
|
module.exports = {
|
|
theme: {
|
|
debugScreens: {
|
|
position: ['bottom', 'left'],
|
|
},
|
|
},
|
|
plugins: [
|
|
require('tailwindcss-debug-screens'),
|
|
],
|
|
}
|
|
```
|
|
|
|
#### Styles
|
|
|
|
Take a look at the [index.js](index.js) file to see all the default styles.
|
|
|
|
```js
|
|
// tailwind.config.js
|
|
module.exports = {
|
|
theme: {
|
|
debugScreens: {
|
|
style: {
|
|
backgroundColor: '#C0FFEE',
|
|
color: 'black',
|
|
// ...
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('tailwindcss-debug-screens'),
|
|
],
|
|
}
|
|
```
|
|
|
|
#### Prefix
|
|
|
|
Modify the debug label prefix with the `prefix` configuration option.
|
|
|
|
```js
|
|
// tailwind.config.js
|
|
module.exports = {
|
|
theme: {
|
|
debugScreens: {
|
|
prefix: 'screen: ',
|
|
},
|
|
},
|
|
plugins: [
|
|
require('tailwindcss-debug-screens'),
|
|
],
|
|
}
|
|
```
|
|
|
|
#### Selector
|
|
|
|
Modify the debug element selector with the `selector` configuration option.
|
|
|
|
```js
|
|
// tailwind.config.js
|
|
module.exports = {
|
|
theme: {
|
|
debugScreens: {
|
|
selector: '.debug-screens',
|
|
},
|
|
},
|
|
plugins: [
|
|
require('tailwindcss-debug-screens'),
|
|
],
|
|
}
|
|
```
|