Skip to content

Instantly share code, notes, and snippets.

@PixelJanitor
Last active May 18, 2023 06:00
Show Gist options
  • Save PixelJanitor/d99a35e314ad256eb744bc8976ebe8b0 to your computer and use it in GitHub Desktop.
Save PixelJanitor/d99a35e314ad256eb744bc8976ebe8b0 to your computer and use it in GitHub Desktop.
Tailwind Safari responsive design presets
defaults write ~/Library/Containers/com.apple.Safari/Data/Library/Preferences/com.apple.Safari.plist ResponsiveDesignCustomPresetConfigurations '(
{
rotated = 0;
screenHeight = 1200;
screenWidth = 1280;
userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15";
},
{
rotated = 0;
screenHeight = 1540;
screenWidth = 1536;
userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15";
},
{
rotated = 0;
screenHeight = 1408;
screenWidth = 2048;
userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15";
},
{
rotated = 0;
screenHeight = 1440;
screenWidth = 2560;
userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15";
},
{
rotated = 0;
screenHeight = 1728;
screenWidth = 3072;
userAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15";
}
)'
@PixelJanitor
Copy link
Author

PixelJanitor commented Nov 8, 2021

This is for MacOS 10.14 and above. MacOS 10.13 and older have the plist in ~/Library/Preferences/com.apple.Safari.plist. Adjust the script based on your needs for that to point there.

You may need enable full disk access for your terminal in System preferences -> Security & Privacy -> Privacy to access the file.

If you use custom breakpoints outside tailwind's default breakpoints you can adjust in the above config accordingly. Add/removing display objects is totally acceptable as well.

If you don't use a retina monitor you may need to 1/2 these values. I've not tested on a non Retina display. For an 8x display you may need to scale the values accordingly as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment