croutonn / Tailwindcss Pseudo Elements
Licence: mit
TailwindCSS Plugin that adds variants of pseudo elements.
Stars: ✭ 81
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Tailwindcss Pseudo Elements
Dashboard
Customizable personal dashboard and startpage
Stars: ✭ 70 (-13.58%)
Mutual labels: tailwindcss
Vue Tailwind
Vue UI components with configurable classes ready for TailwindCSS
Stars: ✭ 1,183 (+1360.49%)
Mutual labels: tailwindcss
Nordic Store
Tailwind CSS Starter Template - Nordic Shop / Store
Stars: ✭ 61 (-24.69%)
Mutual labels: tailwindcss
Tailwindcss Sketch Kit
💎 Sketch UI kit for Tailwind CSS
Stars: ✭ 68 (-16.05%)
Mutual labels: tailwindcss
Nuxt Tailwind
A Nuxt.js starter project template using Tailwind CSS without the distraction of a complicated development environment.
Stars: ✭ 71 (-12.35%)
Mutual labels: tailwindcss
Tw Universal Tokens
Use Tailwind tokens as CSS variables, SASS map, SASS variables, ES module, JSON & Common JS module.
Stars: ✭ 56 (-30.86%)
Mutual labels: tailwindcss
Stts
A starter template for Svelte, Tailwind, Typescript, and Snowpack
Stars: ✭ 78 (-3.7%)
Mutual labels: tailwindcss
Tailwindcss Alpha
Automatic alpha variants for your Tailwind CSS colors
Stars: ✭ 68 (-16.05%)
Mutual labels: tailwindcss
Seed Quickstart Webpack
Template for web apps with Seed (Rust framework), TailwindCSS and Webpack.
Stars: ✭ 73 (-9.88%)
Mutual labels: tailwindcss
Tall
A TALL (Tailwind CSS, Alpine.js, Laravel and Livewire) Preset for Laravel
Stars: ✭ 1,133 (+1298.77%)
Mutual labels: tailwindcss
Tailwind Cheatsheet
A printable one-page cheatsheet for TailwindCSS.
Stars: ✭ 67 (-17.28%)
Mutual labels: tailwindcss
Tailwind Styled Component
Create Tailwind CSS React components like styled components with class names on multiple lines and conditional class rendering
Stars: ✭ 57 (-29.63%)
Mutual labels: tailwindcss
Developmint.de
Open source company page built with Nuxt.js and TailwindCSS
Stars: ✭ 74 (-8.64%)
Mutual labels: tailwindcss
Framework
An eCommerce administration built with Laravel 7 for create and manage online shop with multi-vendor.
Stars: ✭ 56 (-30.86%)
Mutual labels: tailwindcss
Profile Card
Tailwind CSS Starter Template - Profile Card (Single page website for your profile/links)
Stars: ✭ 69 (-14.81%)
Mutual labels: tailwindcss
Pingcrm Svelte
🦊 Ping CRM Svelte - A demo app to illustrate how Inertia.js works with Laravel and Svelte (hosted on a heroku free dyno).
Stars: ✭ 74 (-8.64%)
Mutual labels: tailwindcss
Tailwindcss Theme Variants
Media-query- or JavaScript-based theme variants with fallback for Tailwind CSS
Stars: ✭ 73 (-9.88%)
Mutual labels: tailwindcss
tailwindcss-pseudo-elements
TailwindCSS Plugin that adds variants of pseudo elements (::before
, ::after
, ::first-letter
, etc.).
Usage
Install
NPM
npm install tailwindcss-pseudo-elements --save-dev
Yarn
yarn add tailwindcss-pseudo-elements -D
Configuration
const plugin = require('tailwindcss/plugin')
module.exports = {
variants: {
extend: {
textColor: [
'responsive',
'hover',
'focus',
'before',
'after',
// If you want to combine it with a pseudo class,
// use `<pseudo-class>_<pseudo-element>`.
'hover_before',
'hover_after',
'focus_before',
'foo_bar',
],
},
},
// You can set up your own pseudo-classes and pseudo-elements.
customPseudoClasses: ['foo'],
customPseudoElements: ['bar'],
plugins: [
require('tailwindcss-pseudo-elements'),
// This plugin is useful in combination with tailwindcss-aspect-ratio.
require('tailwindcss-aspect-ratio')({
ratios: {
'16/9': [16, 9],
'4/3': [4, 3],
'3/2': [3, 2],
'1/1': [1, 1],
},
variants: ['before', 'hover_before', 'responsive'],
}),
plugin(function ({ addUtilities }) {
addUtilities(
{
'.empty-content': {
content: "''",
},
},
['before']
)
}),
],
}
HTML
<div
class="relative
before:aspect-ratio-4/3
hover:before:aspect-ratio-1/1
before:empty-content"
>
<img class="absolute pin w-full h-full" src="..." />
</div>
Content Property Utilities
There are utilities that set the attributes of HTML elements to the content property.
Mark it up as follows:
<p
class="text-lg text-blue-600 content-before content-after content-hover-before"
tw-content-before="🧡"
tw-content-hover-before="💖"
tw-content-after="💙️"
>
Tailwind CSS
</p>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].