Nodeschool Public Materials
    Have ideas to improve npm?Join in the discussion! »

    tailwindcss-pseudo-selectors

    2.0.0 • Public • Published

    Tailwindcss-pseudo-selectors

    Plugin for Tailwind CSS that adds all the different pseudo selectors as variants

    GitHub package.json version GitHub license npm bundle size semantic-release GitHub issues Twitter

    Installation

    NPM

    npm install tailwindcss-pseudo-selectors --save-dev

    Yarn

    yarn add tailwindcss-pseudo-selectors -D

    Usage

    Configuration

    Add the plugin to your tailwind.config.js (after you've installed it as described in the installation instructions). And then add each of the variants from this package that you want to use to the Tailwind CSS utilities to enable them in your build.

    // tailwind.config.js
    module.exports = {
      theme: {
        // ..
      },
      variants: {
        extend: {
          ringColor: ['valid', 'invalid'],
        },
      },
      plugins: [
        //..
        require('tailwindcss-pseudo-selectors'),
      ],
    };

    HTML

    Then in your HTML you can use the variants as any of the official ones like hover: or dark:

    <div class="space-x-8">
      <input type="email" value="Invalid input" class="ring-2 ring-offset-2 invalid:ring-red-500" />
      <input type="text" value="Valid input" class="ring-2 ring-offset-2 valid:ring-green-500" />
    </div>

    And the result would look like this:

    Result

    Pseudo-classes

    A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.

    NOTE: Tailwind already has some of the most common pseudo-classes like :focus and :hover but some of them are not enabled by default. You can check out the Tailwind CSS documentation for more detailed information about those.

    The following pseudo-classes are currently supported in this package:

    • :any-link
    • :blank
    • :checked
    • :current
    • :default
    • :defined
    • :dir
    • :drop
    • :empty
    • :enabled
    • :first
    • :first-of-type
    • :fullscreen
    • :future
    • :host
    • :indeterminate
    • :in-range
    • :invalid
    • :lang
    • :last-of-type
    • :left
    • :link
    • :local-link
    • :only-child
    • :only-of-type
    • :optional
    • :out-of-range
    • :past
    • :picture-in-picture
    • :placeholder-shown
    • :read-only
    • :read-write
    • :required
    • :right
    • :root
    • :scope
    • :target
    • :target-within
    • :user-invalid
    • :valid

    For more detailed information about which CSS properties can be used with each of these, please refer to the MDN documentation.

    Pseudo-elements

    A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

    The following pseudo-elements are currently supported in this package:

    • ::after
    • ::before
    • ::cue
    • ::cue-region
    • ::first-letter
    • ::first-line
    • ::file-selector-button
    • ::selection

    For more detailed information about which CSS properties can be used with each of these, please refer to the MDN documentation.

    License

    MIT

    Install

    npm i tailwindcss-pseudo-selectors

    DownloadsWeekly Downloads

    23

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    11.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar