Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: arrays and objects with raw, min or max properties for screen #94

Merged
merged 1 commit into from
Jan 22, 2021

Conversation

sastan
Copy link
Collaborator

@sastan sastan commented Jan 22, 2021

Support more Tailwind breakpoints in theme screens

setup({
    theme: {
      extend: {
        screens: {
          standalone: { raw: '(display-mode:standalone)' },
          portrait: { raw: '(orientation: portrait)' },
          print: { raw: 'print' },
          special: [
            // Sidebar appears at 768px, so revert to `sm:` styles between 768px
            // and 868px, after which the main content area is wide enough again to
            // apply the `md:` styles.
            { min: '668px', max: '767px' },
            { min: '868px' },
          ],
        },
      },
    },
})

tw`standalone:text-black`
tw`portraitt:text-black`
tw`print:text-black`
tw`special:text-black`

Fixes #20

/cc @tw-in-js/contributors

@sastan sastan added the 🌬 Tailwind CSS compatibility Some feature of Tailwind CSS is missing or not working as expected label Jan 22, 2021
@coveralls
Copy link

Pull Request Test Coverage Report for Build 503148256

  • -3 of 74 (95.95%) changed or added relevant lines in 6 files are covered.
  • 8 unchanged lines in 4 files lost coverage.
  • Overall coverage increased (+0.3%) to 90.379%

Changes Missing Coverage Covered Lines Changed/Added Lines %
src/twind/decorate.ts 1 4 25.0%
Files with Coverage Reduction New Missed Lines %
src/css/index.ts 1 96.05%
src/twind/presedence.ts 1 95.51%
src/internal/util.ts 3 92.17%
src/twind/plugins.ts 3 96.27%
Totals Coverage Status
Change from base Build 503134640: 0.3%
Covered Lines: 4303
Relevant Lines: 4803

💛 - Coveralls

@coveralls
Copy link

coveralls commented Jan 22, 2021

Pull Request Test Coverage Report for Build 503882693

  • 64 of 68 (94.12%) changed or added relevant lines in 6 files are covered.
  • 7 unchanged lines in 4 files lost coverage.
  • Overall coverage increased (+0.2%) to 90.283%

Changes Missing Coverage Covered Lines Changed/Added Lines %
src/twind/plugins.ts 5 6 83.33%
src/twind/decorate.ts 1 4 25.0%
Files with Coverage Reduction New Missed Lines %
src/css/index.ts 1 96.05%
src/twind/presedence.ts 1 95.51%
src/twind/plugins.ts 2 96.37%
src/internal/util.ts 3 92.13%
Totals Coverage Status
Change from base Build 503869883: 0.2%
Covered Lines: 4296
Relevant Lines: 4795

💛 - Coveralls

@github-actions
Copy link
Contributor

github-actions bot commented Jan 22, 2021

size-limit report 📦

Path Size
dist/twind.js 12.09 KB (+0.7% 🔺)

@github-actions
Copy link
Contributor

Try the Preview Package

Official releases are only available on registry.npmjs.org as twind.

This PR has been published to npm.pkg.github.com as @tw-in-js/twind@pr94.

Install/Update

Configure your NPM client (click to expand)

Adjust you .npmrc to use https://npm.pkg.github.com for @tw-in-js

@tw-in-js:registry=https://npm.pkg.github.com

Using the command line:

npm config set @tw-in-js:registry https://npm.pkg.github.com --global
# For npm
npm install --force twind@npm:@tw-in-js/twind@pr94

# For yarn - upgrade implies install
yarn upgrade twind@npm:@tw-in-js/twind@pr94

@sastan sastan force-pushed the compat-theme-screens branch 2 times, most recently from 34ab3ca to 050fcaf Compare January 22, 2021 14:33
@sastan sastan merged commit 2bc42cf into main Jan 22, 2021
@sastan sastan deleted the compat-theme-screens branch January 22, 2021 17:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌬 Tailwind CSS compatibility Some feature of Tailwind CSS is missing or not working as expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

tailwindcss supports arrays and objects with raw, min or max properties for screens
2 participants