https://github.com/zuowendong/postcss-px-to-viewport-tailwind

postcss-px-to-viewport + tailwindcss -> different viewport width
https://github.com/zuowendong/postcss-px-to-viewport-tailwind

Last synced: about 2 months ago
JSON representation

postcss-px-to-viewport + tailwindcss -> different viewport width

• Host: GitHub
• URL: https://github.com/zuowendong/postcss-px-to-viewport-tailwind
• Owner: zuowendong
• License: mit
• Created: 2024-09-10T07:04:35.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-09-10T14:39:17.000Z (4 months ago)
• Last Synced: 2024-09-11T11:00:32.488Z (4 months ago)
• Language: JavaScript
• Size: 10.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-px-to-viewport-tailwind

Use postcss-px-to-viewport and tailwindcss can dynamically change the viewport width.

## how to use

```js

postcss: {

  plugins: {

    tailwindcss: {},

    autoprefixer: {

      overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"],

    },

    "postcss-px-to-viewport": {

      unitToConvert: "px",

      viewportWidth: 375,

      viewportWidthPaid: 750,

      viewportWidthPc: 1920,

      width2Tailwind: {

        viewportWidthPaid: "md",

        viewportWidthPc: "xl",

      },

      unitPrecision: 6,

      propList: ["*"],

      viewportUnit: "vw",

      fontViewportUnit: "vw",

      selectorBlackList: [],

      minPixelValue: 1,

      mediaQuery: true,

      replace: true,

      exclude: [/node_modules/],

      landscape: false,

    },

  },

},

```