Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jorenvanhee/tailwindcss-debug-screens
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
https://github.com/jorenvanhee/tailwindcss-debug-screens
tailwind tailwindcss-plugin
Last synced: about 1 month ago
JSON representation
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
- Host: GitHub
- URL: https://github.com/jorenvanhee/tailwindcss-debug-screens
- Owner: jorenvanhee
- Created: 2019-10-29T19:18:34.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-01T20:55:00.000Z (over 1 year ago)
- Last Synced: 2024-09-30T18:40:48.171Z (about 1 month ago)
- Topics: tailwind, tailwindcss-plugin
- Language: JavaScript
- Homepage: https://joren.co/tailwindcss-debug-screens-demo/
- Size: 117 KB
- Stars: 602
- Watchers: 7
- Forks: 15
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-tailwindcss - Debug screens - Adds a component that shows the currently active screen (responsive breakpoint). (Plugins)
- tailwindcss-awesome - jorenvanhee/tailwindcss-debug-screens - A Tailwind CSS component that shows the currently active screen (responsive breakpoint). <br/> (7 stars / 2020-11-23 / 16 commits ) (Running the update / By Popularity)
README
# Tailwind CSS Debug Screens 📱
A Tailwind CSS component that shows the currently active screen (responsive breakpoint).
[Demo](https://joren.co/tailwindcss-debug-screens-demo/)
## 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'),
]
}
```
3. Add the class `debug-screens` to your `` tag:
```html
```
### Disable in production
#### Laravel
```twig
```
#### Craft CMS
```twig
```
## 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'),
],
}
```