https://github.com/dirheimerb/tailwind-debug-ts
https://github.com/dirheimerb/tailwind-debug-ts
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/dirheimerb/tailwind-debug-ts
- Owner: dirheimerb
- Created: 2024-04-28T21:19:30.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-28T21:19:32.000Z (about 2 years ago)
- Last Synced: 2025-02-01T07:28:56.687Z (over 1 year ago)
- Language: TypeScript
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Debug Screens Tailwind CSS Plugin
This plugin adds a visual overlay to your Tailwind CSS project to help developers see which media query is currently active. It's designed for development use to assist in responsive design debugging.
## Installation
Before you can use or test the plugin, you need to have Node.js installed. If you don't have Node.js installed, you can download and install it from [Node.js official website](https://nodejs.org/).
### Step 1: Install Dependencies
After setting up Node.js, you need to install the necessary dependencies. Run the following commands in your project directory:
```bash
npm install tailwindcss postcss autoprefixer jest postcss-js --save-dev
```
This will install Tailwind CSS, PostCSS, Autoprefixer (required by Tailwind CSS), Jest for testing, and postcss-js for running PostCSS in a JavaScript environment.
### Step 2: Configure Tailwind CSS
Create a `tailwind.config.js` file in your project root if you don't already have one:
```javascript
module.exports = {
content: ['./src/**/*.{html,js}'],
theme: {
extend: {},
},
plugins: [require('tailwindcss-debug-ts')],
};
```
Replace `tailwindcss-debug-ts` with the actual path to the plugin file.
### Step 3: Setup Jest
Create a `jest.config.js` file in your project root to configure Jest:
```javascript
module.exports = {
testEnvironment: 'node',
transform: {
'^.+\\.js$': 'babel-jest',
},
};
```
This configuration sets up Jest to use the Node environment and transpile JavaScript files using Babel.
### Step 4: Running Tests
To run your tests, you can add a test script to your `package.json`:
```json
"scripts": {
"test": "jest"
}
```
Then, execute the tests by running:
```bash
npm test
```
## Documentation
Refer to the source code for detailed comments on each part of the plugin's functionality. The plugin's primary features include creating a fixed overlay that indicates the active screen size based on your Tailwind CSS configuration.
## Notes
- This plugin is intended for development use only.
- Ensure that the plugin is not enabled in your production builds to avoid performance overhead.
Thank you for using the Debug Screens Tailwind CSS Plugin!