0.0.366 • Published 9 months ago

proto-tailwindcss-pixels v0.0.366

Weekly downloads
-
License
ISC
Repository
github
Last release
9 months ago

Pixel Dimensions for Tailwind CSS

This plugin allows you to quickly generate pixel classes for Tailwind CSS.

Requirements

This plugin requires Tailwind CSS 2.2.2 or later.

Installation

yarn add proto-tailwindcss-pixels

Usage

The following plugin options are available. See below how these are passed (via an object) to the plugin in your tailwind.config.js.

Supported Tags

This plugin currently support the following tags in Options:

const tags = [
  'fontSize',
  'height',
  'lineHeight',
  'maxHeight',
  'maxWidth',
  'minHeight',
  'minWidth',
  'spacing',
  'width',
]

Specifying any of those in options will generate pixel classes as shown below.

CAVEAT: if you want the full 900 pixel variations to be generated, you have to pass an empty object in the options:

width: {},

The plugin no longer generates width & height by default, you must specify which tags you want to generate...

Options Available

You can pass along number values to define the range of the generated sizes.

  start: number,  // defaults to 0
   stop: number,  // defaults to 900

For example:

// tailwind.config.js
module.exports = {
  plugins: [
    // Generate 10 widths and 3 heights in pxs
    require('proto-tailwindcss-pixels')({
        width: {
          stop: 10,
        },
        height: {
          stop: 10,
          start: 8,
        },
    }),
  ],
};

The above configuration would roughly generate the following CSS:

.w-0px {
  width: 0;
}

.w-1px {
  width: 1px;
}

.w-2px {
  width: 2px;
}

.w-3px {
  width: 3px;
}

.w-4px {
  width: 4px;
}

.w-5px {
  width: 5px;
}

.w-6px {
  width: 6px;
}

.w-7px {
  width: 7px;
}

.w-8px {
  width: 8px;
}

.w-9px {
  width: 9px;
}

.w-10px {
  width: 10px;
}

.h-8px {
  height: 8px;
}

.h-9px {
  height: 9px;
}

.h-10px {
  height: 10px;
}
/* etc. */

Which you can then use in your HTML like this:

<div class="h-10px">
  I'm a div with a height of 10 pixels or pickles depending on how you pronounce it.
</div>

The above depends on the order of the generated CSS.

0.0.359

9 months ago

0.0.358

9 months ago

0.0.362

9 months ago

0.0.361

9 months ago

0.0.360

9 months ago

0.0.366

9 months ago

0.0.365

9 months ago

0.0.364

9 months ago

0.0.363

9 months ago

0.0.357

9 months ago

0.0.356

9 months ago

0.0.339

11 months ago

0.0.348

11 months ago

0.0.347

11 months ago

0.0.346

11 months ago

0.0.345

11 months ago

0.0.349

11 months ago

0.0.340

11 months ago

0.0.344

11 months ago

0.0.343

11 months ago

0.0.342

11 months ago

0.0.341

11 months ago

0.0.351

10 months ago

0.0.350

11 months ago

0.0.355

10 months ago

0.0.354

10 months ago

0.0.353

10 months ago

0.0.352

10 months ago

0.0.326

1 year ago

0.0.325

1 year ago

0.0.324

1 year ago

0.0.323

1 year ago

0.0.329

1 year ago

0.0.328

1 year ago

0.0.327

1 year ago

0.0.322

1 year ago

0.0.321

1 year ago

0.0.337

12 months ago

0.0.336

12 months ago

0.0.335

12 months ago

0.0.334

12 months ago

0.0.338

12 months ago

0.0.333

1 year ago

0.0.332

1 year ago

0.0.331

1 year ago

0.0.330

1 year ago

0.0.320

1 year ago

0.0.319

1 year ago

0.0.318

1 year ago

0.0.317

1 year ago

0.0.316

1 year ago

0.0.315

1 year ago

0.0.314

1 year ago

0.0.313

1 year ago

0.0.312

1 year ago

0.0.311

1 year ago

0.0.310

1 year ago

0.0.309

1 year ago

0.0.308

1 year ago

0.0.307

1 year ago

0.0.306

1 year ago

0.0.305

1 year ago

0.0.304

1 year ago

0.0.303

1 year ago

0.0.302

1 year ago

0.0.301

1 year ago

0.0.300

1 year ago

0.0.299

1 year ago

0.0.298

1 year ago

0.0.297

1 year ago

0.0.296

1 year ago

0.0.295

1 year ago

0.0.294

2 years ago

0.0.293

2 years ago

0.0.292

2 years ago

0.0.291

2 years ago

0.0.289

2 years ago

0.0.288

2 years ago

0.0.290

2 years ago

0.0.287

2 years ago

0.0.285

2 years ago

0.0.286

2 years ago

0.0.284

2 years ago

0.0.283

2 years ago

0.0.282

2 years ago

0.0.281

2 years ago

0.0.279

2 years ago

0.0.274

2 years ago

0.0.273

2 years ago

0.0.272

2 years ago

0.0.271

2 years ago

0.0.278

2 years ago

0.0.277

2 years ago

0.0.276

2 years ago

0.0.275

2 years ago

0.0.270

2 years ago

0.0.280

2 years ago

0.0.269

2 years ago

0.0.268

2 years ago

0.0.267

2 years ago

0.0.266

2 years ago

0.0.265

2 years ago

0.0.263

2 years ago

0.0.262

2 years ago

0.0.261

2 years ago

0.0.260

2 years ago

0.0.264

2 years ago

0.0.238

2 years ago

0.0.237

2 years ago

0.0.239

2 years ago

0.0.249

2 years ago

0.0.248

2 years ago

0.0.247

2 years ago

0.0.246

2 years ago

0.0.241

2 years ago

0.0.240

2 years ago

0.0.245

2 years ago

0.0.244

2 years ago

0.0.243

2 years ago

0.0.242

2 years ago

0.0.259

2 years ago

0.0.258

2 years ago

0.0.257

2 years ago

0.0.252

2 years ago

0.0.251

2 years ago

0.0.250

2 years ago

0.0.256

2 years ago

0.0.255

2 years ago

0.0.254

2 years ago

0.0.253

2 years ago

0.0.227

2 years ago

0.0.226

2 years ago

0.0.225

2 years ago

0.0.224

2 years ago

0.0.229

2 years ago

0.0.228

2 years ago

0.0.236

2 years ago

0.0.235

2 years ago

0.0.230

2 years ago

0.0.234

2 years ago

0.0.233

2 years ago

0.0.232

2 years ago

0.0.231

2 years ago

0.0.205

3 years ago

0.0.204

3 years ago

0.0.203

3 years ago

0.0.202

3 years ago

0.0.209

2 years ago

0.0.208

3 years ago

0.0.207

3 years ago

0.0.206

3 years ago

0.0.216

2 years ago

0.0.215

2 years ago

0.0.214

2 years ago

0.0.213

2 years ago

0.0.219

2 years ago

0.0.218

2 years ago

0.0.217

2 years ago

0.0.212

2 years ago

0.0.211

2 years ago

0.0.210

2 years ago

0.0.223

2 years ago

0.0.222

2 years ago

0.0.221

2 years ago

0.0.220

2 years ago

0.0.201

3 years ago

0.0.200

3 years ago

0.0.197

3 years ago

0.0.195

3 years ago

0.0.194

3 years ago

0.0.199

3 years ago

0.0.198

3 years ago

0.0.193

3 years ago

0.0.192

3 years ago

0.0.191

3 years ago

0.0.190

3 years ago

0.0.169

3 years ago

0.0.168

3 years ago

0.0.167

3 years ago

0.0.175

3 years ago

0.0.174

3 years ago

0.0.173

3 years ago

0.0.172

3 years ago

0.0.179

3 years ago

0.0.178

3 years ago

0.0.177

3 years ago

0.0.176

3 years ago

0.0.171

3 years ago

0.0.170

3 years ago

0.0.186

3 years ago

0.0.185

3 years ago

0.0.184

3 years ago

0.0.183

3 years ago

0.0.189

3 years ago

0.0.188

3 years ago

0.0.187

3 years ago

0.0.182

3 years ago

0.0.181

3 years ago

0.0.180

3 years ago

0.0.159

3 years ago

0.0.158

3 years ago

0.0.157

3 years ago

0.0.156

3 years ago

0.0.155

3 years ago

0.0.164

3 years ago

0.0.163

3 years ago

0.0.162

3 years ago

0.0.161

3 years ago

0.0.166

3 years ago

0.0.165

3 years ago

0.0.160

3 years ago

0.0.153

3 years ago

0.0.152

3 years ago

0.0.151

3 years ago

0.0.150

3 years ago

0.0.154

3 years ago

0.0.139

3 years ago

0.0.138

3 years ago

0.0.137

3 years ago

0.0.136

3 years ago

0.0.131

3 years ago

0.0.135

3 years ago

0.0.134

3 years ago

0.0.133

3 years ago

0.0.132

3 years ago

0.0.149

3 years ago

0.0.148

3 years ago

0.0.147

3 years ago

0.0.142

3 years ago

0.0.141

3 years ago

0.0.140

3 years ago

0.0.146

3 years ago

0.0.145

3 years ago

0.0.144

3 years ago

0.0.143

3 years ago

0.0.119

3 years ago

0.0.128

3 years ago

0.0.127

3 years ago

0.0.126

3 years ago

0.0.125

3 years ago

0.0.129

3 years ago

0.0.120

3 years ago

0.0.124

3 years ago

0.0.123

3 years ago

0.0.122

3 years ago

0.0.121

3 years ago

0.0.130

3 years ago

0.0.117

3 years ago

0.0.116

3 years ago

0.0.115

3 years ago

0.0.114

3 years ago

0.0.118

3 years ago

0.0.113

3 years ago

0.0.112

3 years ago

0.0.111

3 years ago

0.0.110

3 years ago

0.0.84

4 years ago

0.0.85

4 years ago

0.0.86

4 years ago

0.0.87

4 years ago

0.0.88

4 years ago

0.0.89

4 years ago

0.0.80

4 years ago

0.0.81

4 years ago

0.0.82

4 years ago

0.0.83

4 years ago

0.0.73

4 years ago

0.0.74

4 years ago

0.0.75

4 years ago

0.0.76

4 years ago

0.0.77

4 years ago

0.0.78

4 years ago

0.0.79

4 years ago

0.0.70

4 years ago

0.0.71

4 years ago

0.0.72

4 years ago

0.0.67

4 years ago

0.0.68

4 years ago

0.0.69

4 years ago

0.0.106

3 years ago

0.0.105

3 years ago

0.0.104

3 years ago

0.0.103

3 years ago

0.0.109

3 years ago

0.0.108

3 years ago

0.0.107

3 years ago

0.0.102

3 years ago

0.0.101

3 years ago

0.0.100

3 years ago

0.0.95

4 years ago

0.0.96

4 years ago

0.0.97

4 years ago

0.0.98

4 years ago

0.0.99

3 years ago

0.0.90

4 years ago

0.0.91

4 years ago

0.0.92

4 years ago

0.0.93

4 years ago

0.0.94

4 years ago

0.0.62

4 years ago

0.0.63

4 years ago

0.0.64

4 years ago

0.0.65

4 years ago

0.0.66

4 years ago

0.0.60

4 years ago

0.0.61

4 years ago

0.0.59

4 years ago

0.0.57

4 years ago

0.0.58

4 years ago

0.0.56

4 years ago

0.0.51

4 years ago

0.0.52

4 years ago

0.0.53

4 years ago

0.0.54

4 years ago

0.0.55

4 years ago

0.0.50

4 years ago

0.0.48

4 years ago

0.0.49

4 years ago

0.0.45

4 years ago

0.0.47

4 years ago

0.0.44

4 years ago

0.0.43

4 years ago

0.0.42

4 years ago

0.0.40

4 years ago

0.0.41

4 years ago

0.0.38

4 years ago

0.0.39

4 years ago

0.0.37

4 years ago

0.0.36

4 years ago

0.0.35

4 years ago

0.0.33

4 years ago

0.0.34

4 years ago

0.0.32

4 years ago

0.0.31

4 years ago

0.0.30

4 years ago

0.0.29

4 years ago

0.0.28

4 years ago

0.0.27

4 years ago

0.0.26

4 years ago

0.0.25

4 years ago

0.0.22

4 years ago

0.0.23

4 years ago

0.0.24

4 years ago

0.0.21

4 years ago

0.0.20

4 years ago

0.0.19

4 years ago

0.0.18

4 years ago

0.0.17

4 years ago

0.0.16

4 years ago

0.0.15

4 years ago

0.0.14

4 years ago

0.0.13

4 years ago

0.0.12

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.1

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago