105 lines
2 KiB
ReStructuredText
105 lines
2 KiB
ReStructuredText
.. page:: titlePage
|
|
|
|
.. class:: centredtitle
|
|
|
|
Extending Tailwind CSS with Plugins
|
|
|
|
.. page::
|
|
|
|
.. class:: centredtitle
|
|
|
|
``npm install --save-dev
|
|
tailwindcss-list-reset``
|
|
|
|
.. page:: standardPage
|
|
|
|
Adding a plugin
|
|
===============
|
|
|
|
.. code-block:: javascript
|
|
:linenos:
|
|
:include: code/plugins-add-plugin.txt
|
|
|
|
Generated CSS
|
|
=============
|
|
|
|
.. code-block:: css
|
|
:linenos:
|
|
:include: code/plugins-generated-css.txt
|
|
|
|
Writing plugins
|
|
===============
|
|
|
|
.. code-block:: javascript
|
|
:linenos:
|
|
:include: code/plugins-plugin-source.txt
|
|
|
|
Writing plugins
|
|
===============
|
|
|
|
Adding `child` and `child-hover` variants:
|
|
|
|
|
|
|
|
|
.. code-block:: javascript
|
|
:linenos:
|
|
|
|
const plugin = require('tailwindcss/plugin');
|
|
|
|
module.exports = plugin(({ addVariant }) => {
|
|
addVariant('child', '& > *');
|
|
addVariant('child-hover', '& > *:hover');
|
|
});
|
|
|
|
Writing plugins
|
|
===============
|
|
|
|
Adding a `hocus` variant:
|
|
|
|
|
|
|
|
|
.. code-block:: javascript
|
|
:linenos:
|
|
|
|
const plugin = require('tailwindcss/plugin');
|
|
|
|
module.exports = plugin(({ addVariant }) => {
|
|
addVariant('hocus', ['&:hover', '&:focus']);
|
|
});
|
|
|
|
Writing plugins
|
|
===============
|
|
|
|
Creating a button component:
|
|
|
|
|
|
|
|
|
.. code-block:: javascript
|
|
:linenos:
|
|
|
|
plugin(function ({ addComponents, theme }) {
|
|
let styles = {
|
|
primary: {
|
|
default: {
|
|
backgroundColor: theme("colors.primary.DEFAULT"),
|
|
border: `2px solid ${theme("colors.primary.dark")}`,
|
|
borderRadius: "10px",
|
|
color: theme("colors.white"),
|
|
cursor: "pointer",
|
|
padding: `${theme("padding.3")} ${theme("padding.12")}`,
|
|
},
|
|
|
|
hover: {
|
|
backgroundColor: theme("colors.white"),
|
|
color: theme("colors.primary.DEFAULT"),
|
|
},
|
|
},
|
|
}
|
|
|
|
addComponents({
|
|
"#edit-checkout.button": styles.primary.default,
|
|
"#edit-checkout.button:hover, #edit-checkout.button:focus":
|
|
styles.primary.hover,
|
|
})
|
|
})
|