$ cnpm install @viget/tailwindcss-plugins
This plugin wraps up a collection of other plugins we've written for Tailwind CSS.
Plugins include:
Utilities include:
# install via npm
npm i @viget/tailwindcss-plugins -D
# install via yarn
yarn add @viget/tailwindcss-plugins -D
Simply require the plugins or utilities in your tailwindcss.config.js
file, and follow the usage instructions for each documented in its folder.
// utilities
const a = require('@viget/tailwindcss-plugins/utilities/alpha')
const { em, rem, remPair, pxPair } = require('@viget/tailwindcss-plugins/utilities/fns')
// plugins
plugins: [
require('@viget/tailwindcss-plugins/PLUGIN_NAME'),
// ...
],
Run tests:
yarn test
Each plugin is tested using Jest. The easiest way to get started is by looking at existing tests, but in brief each can have:
:
, i.e. \\:
corePlugins
, as these are all turned off by default (see parent-expanded for an example)Make sure to use the proper helper for your plugin, which just depends on if you are adding components or utilities:
In addition to passing your plugin and config, these helpers accept a third parameter: a boolean to include the entire default Tailwind config when merging in your options.
Additionally, there are some other plugin examples included in this repository in the examples directory. These are not registerable in your Tailwind config. The reasons for this are that these represent plugins which:
For example, heading components could be done any number of ways. They could be simple or complex, fixed or responsive, wrapped for rich text or classnames only. For this reason, we've included several examples of these. If you need one of these plugins, it is recommended to copy and paste the plugin code into a custom plugin for your project.
Visit code.viget.com to see more projects from Viget.
Copyright © npmmirror.com | 浙ICP备15033595号-63 |