Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Text-fill and text-stroke utilities for Tailwind CSS.

NotificationsYou must be signed in to change notification settings

hacknug/tailwindcss-text-fill-stroke

Repository files navigation

This plugin adds utilities to usetext-fill,text-stroke andpaint-order with Tailwind CSS.

Note

Now with support for TailwindCSS v3 and arbitrary values and variants ✨

Installation

Add this plugin to your project:

# Install using pnpmpnpm install --save-dev tailwindcss-text-fill-stroke# Install using npmnpm install --save-dev tailwindcss-text-fill-stroke# Install using yarnyarn add -D tailwindcss-text-fill-stroke

Usage

By default the plugin uses theborderColor andborderWidth properties from your theme to generate all of its classes. You can change that to whatever, just keep in mind if you have adefault key in both objects,.text-stroke will set both the-webkit-stroke-color and-webkit-stroke-width of the element.

// tailwind.config.js{theme:{// defaults to these valuestextFillColor:theme=>theme('borderColor'),textStrokeColor:theme=>theme('borderColor'),textStrokeWidth:theme=>theme('borderWidth'),paintOrder:{'fsm':{paintOrder:'fill stroke markers'},'fms':{paintOrder:'fill markers stroke'},'sfm':{paintOrder:'stroke fill markers'},'smf':{paintOrder:'stroke markers fill'},'mfs':{paintOrder:'markers fill stroke'},'msf':{paintOrder:'markers stroke fill'},},},plugins:[require('tailwindcss-text-fill-stroke'),// no options to configure],}
.text-fill {-webkit-text-fill-color:#e0e0e0 }.text-fill-transparent {-webkit-text-fill-color: transparent }.text-fill-black {-webkit-text-fill-color:#000 }.text-fill-white {-webkit-text-fill-color:#fff }.text-stroke {-webkit-text-stroke-color:#e0e0e0 }.text-stroke-transparent {-webkit-text-stroke-color: transparent }.text-stroke-black {-webkit-text-stroke-color:#000 }.text-stroke-white {-webkit-text-stroke-color:#fff }.text-stroke {-webkit-text-stroke-width:1px }.text-stroke-0 {-webkit-text-stroke-width:0 }.text-stroke-2 {-webkit-text-stroke-width:2px }.text-stroke-4 {-webkit-text-stroke-width:4px }.text-stroke-8 {-webkit-text-stroke-width:8px }.paint-fsm {paint-order: fill stroke markers }.paint-fms {paint-order: fill markers stroke }.paint-sfm {paint-order: stroke fill markers }.paint-smf {paint-order: stroke markers fill }.paint-mfs {paint-order: markers fill stroke }.paint-msf {paint-order: markers stroke fill }@media (min-width:640px) {  .sm\:text-fill {-webkit-text-fill-color:#e0e0e0 }  .sm\:text-fill-transparent {-webkit-text-fill-color: transparent }  .sm\:text-fill-black {-webkit-text-fill-color:#000 }  .sm\:text-fill-white {-webkit-text-fill-color:#fff }  .sm\:text-stroke {-webkit-text-stroke-color:#e0e0e0 }  .sm\:text-stroke-transparent {-webkit-text-stroke-color: transparent }  .sm\:text-stroke-black {-webkit-text-stroke-color:#000 }  .sm\:text-stroke-white {-webkit-text-stroke-color:#fff }  .sm\:text-stroke {-webkit-text-stroke-width:1px }  .sm\:text-stroke-0 {-webkit-text-stroke-width:0 }  .sm\:text-stroke-2 {-webkit-text-stroke-width:2px }  .sm\:text-stroke-4 {-webkit-text-stroke-width:4px }  .sm\:text-stroke-8 {-webkit-text-stroke-width:8px }  .sm\:paint-fsm {paint-order: fill stroke markers }  .sm\:paint-fms {paint-order: fill markers stroke }  .sm\:paint-sfm {paint-order: stroke fill markers }  .sm\:paint-smf {paint-order: stroke markers fill }  .sm\:paint-mfs {paint-order: markers fill stroke }  .sm\:paint-msf {paint-order: markers stroke fill }}

About

Text-fill and text-stroke utilities for Tailwind CSS.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors3

  •  
  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp