diff --git a/components/lib/props/style/index.js b/components/lib/props/style/index.js
index 480e9f437..8b15e005d 100644
--- a/components/lib/props/style/index.js
+++ b/components/lib/props/style/index.js
@@ -7,15 +7,15 @@ export const getDeclaration = (property, value) => {
         .join('');
 };
 
+const importantRegex = /.*!$/;
+
 export const token = {
     spacing: (property, options) => {
         return {
             type: 'spacing',
             property,
             transform(value) {
-                console.log(this.key);
-
-                return value;
+                return importantRegex.test(value) ? value + 'important' : value;
             },
             toString(value, options) {
                 return getDeclaration(property, this.transform(value));
@@ -36,22 +36,28 @@ export const token = {
     }
 };
 
-export const createRules = (rules = {}) => {
-    return Object.entries(rules).reduce((acc, [key, value]) => ((acc[key] = { key, ...value }), acc), {});
+export const defineDeclarations = (data = {}) => {
+    return Object.entries(data).reduce((acc, [key, value]) => ((acc[key] = { key, ...value }), acc), {});
 };
 
-export const createStyleData = (rules = {}) => {
-    const keys = Object.keys(rules);
+export const useDeclarations = (...args) => {
+    const declarations = Object.assign({}, ...args);
+    const keys = Object.keys(declarations);
     const props = keys.reduce((acc, k) => ((acc[k] = undefined), acc), {});
 
     return {
-        rules,
         keys,
         props,
-        toString(obj) {
-            return Object.entries(obj)
+        declarations,
+        getStyleDeclarations(options) {},
+        filterP(_props) {
+            const __props = Object.entries(_props)
                 .filter(([key]) => keys.includes(key))
-                .reduce((acc, [key, value]) => {
+                .reduce((acc, [k, v]) => ((acc[k] = v), acc), {});
+            const __ks = Object.keys(__props);
+            const __declarations = Object.entries(__props).reduce((acc, [key]) => ((acc[key] = declarations[key]), acc), {});
+
+            /*const declarations = props.reduce((acc, [key, value]) => {
                     if (ObjectUtils.isNotEmpty(value)) {
                         const rule = ObjectUtils.toKebabCase(key);
 
@@ -60,7 +66,26 @@ export const createStyleData = (rules = {}) => {
 
                     return acc;
                 }, [])
-                .join('');
+                .join('');*/
+
+            return {
+                keys: __ks,
+                props: __props,
+                declarations: __declarations,
+                getStyleDeclarations(options) {
+                    return Object.entries(__declarations)
+                        .reduce((acc, [, value]) => {
+                            const { key, toString } = value;
+
+                            const v = __props[key];
+
+                            ObjectUtils.isNotEmpty(v) && acc.push(value.toString(v, options));
+
+                            return acc;
+                        }, [])
+                        .join('');
+                }
+            };
         }
     };
 };
diff --git a/components/lib/props/style/padding/index.js b/components/lib/props/style/padding/index.js
index eaea6ff26..36a0c9f1d 100644
--- a/components/lib/props/style/padding/index.js
+++ b/components/lib/props/style/padding/index.js
@@ -1,3 +1,4 @@
+import { defineDeclarations, token } from '..';
 import x from './modules/x';
 import y from './modules/y';
 import bottom from './properties/bottom';
@@ -6,6 +7,10 @@ import right from './properties/right';
 import top from './properties/top';
 
 export default {
+    ...defineDeclarations({
+        padding: token.spacing('padding'),
+        p: token.spacing('padding')
+    }),
     // properties
     ...bottom,
     ...left,
@@ -16,33 +21,3 @@ export default {
     ...x,
     ...y
 };
-
-/* const { styleClass } = require('../../utils');
-const bottom = require('./properties/bottom');
-const left = require('./properties/left');
-const right = require('./properties/right');
-const top = require('./properties/top');
-const x = require('./modules/x');
-const y = require('./modules/y');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let paddings = {};
-
-    for (const i in scales) {
-        paddings['p-' + i] = scales[i] + 'rem';
-    }
-
-    styleClass('padding', paddings, root, opts, true);
-
-    // properties
-    bottom(root, opts);
-    left(root, opts);
-    right(root, opts);
-    top(root, opts);
-
-    // modules
-    x(root, opts);
-    y(root, opts);
-};
- */
diff --git a/components/lib/props/style/padding/modules/x.js b/components/lib/props/style/padding/modules/x.js
index 522c3dbc4..2e6a9c2a5 100644
--- a/components/lib/props/style/padding/modules/x.js
+++ b/components/lib/props/style/padding/modules/x.js
@@ -1,20 +1,6 @@
-import { createRules, token } from '../..';
+import { defineDeclarations, token } from '../..';
 
-export default createRules({
+export default defineDeclarations({
     paddingX: token.spacing(['paddingLeft', 'paddingRight']),
     px: token.spacing(['paddingLeft', 'paddingRight'])
 });
-
-/* const { styleClass } = require('../../../utils');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let xPaddings = {};
-
-    for (const i in scales) {
-        xPaddings['px-' + i] = scales[i] + 'rem';
-    }
-
-    styleClass(['padding-left', 'padding-right'], xPaddings, root, opts, true);
-};
- */
diff --git a/components/lib/props/style/padding/modules/y.js b/components/lib/props/style/padding/modules/y.js
index d6180cfad..de38835fa 100644
--- a/components/lib/props/style/padding/modules/y.js
+++ b/components/lib/props/style/padding/modules/y.js
@@ -1,20 +1,6 @@
-import { createRules, token } from '../..';
+import { defineDeclarations, token } from '../..';
 
-export default createRules({
+export default defineDeclarations({
     paddingX: token.spacing(['paddingTop', 'paddingBottom']),
     px: token.spacing(['paddingTop', 'paddingBottom'])
 });
-
-/* const { styleClass } = require('../../../utils');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let yPaddings = {};
-
-    for (const i in scales) {
-        yPaddings['py-' + i] = scales[i] + 'rem';
-    }
-
-    styleClass(['padding-top', 'padding-bottom'], yPaddings, root, opts, true);
-};
- */
diff --git a/components/lib/props/style/padding/properties/bottom.js b/components/lib/props/style/padding/properties/bottom.js
index d51cad9c0..5e49cde94 100644
--- a/components/lib/props/style/padding/properties/bottom.js
+++ b/components/lib/props/style/padding/properties/bottom.js
@@ -1,20 +1,6 @@
-import { createRules, token } from '../..';
+import { defineDeclarations, token } from '../..';
 
-export default createRules({
+export default defineDeclarations({
     paddingBottom: token.spacing('paddingBottom'),
     pb: token.spacing('paddingBottom')
 });
-
-/* const { styleClass } = require('../../../utils');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let bottomPaddings = {};
-
-    for (const i in scales) {
-        bottomPaddings['pb-' + i] = `${scales[i]}rem`;
-    }
-
-    styleClass('padding-bottom', bottomPaddings, root, opts, true);
-};
- */
diff --git a/components/lib/props/style/padding/properties/left.js b/components/lib/props/style/padding/properties/left.js
index 27f4ed704..f4670893e 100644
--- a/components/lib/props/style/padding/properties/left.js
+++ b/components/lib/props/style/padding/properties/left.js
@@ -1,20 +1,6 @@
-import { createRules, token } from '../..';
+import { defineDeclarations, token } from '../..';
 
-export default createRules({
+export default defineDeclarations({
     paddingLeft: token.spacing('paddingLeft'),
     pl: token.spacing('paddingLeft')
 });
-
-/* const { styleClass } = require('../../../utils');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let leftPaddings = {};
-
-    for (const i in scales) {
-        leftPaddings['pl-' + i] = `${scales[i]}rem`;
-    }
-
-    styleClass('padding-left', leftPaddings, root, opts, true);
-};
- */
diff --git a/components/lib/props/style/padding/properties/right.js b/components/lib/props/style/padding/properties/right.js
index 9d39ea9a6..95794f164 100644
--- a/components/lib/props/style/padding/properties/right.js
+++ b/components/lib/props/style/padding/properties/right.js
@@ -1,20 +1,6 @@
-import { createRules, token } from '../..';
+import { defineDeclarations, token } from '../..';
 
-export default createRules({
+export default defineDeclarations({
     paddingRight: token.spacing('paddingRight'),
     pr: token.spacing('paddingRight')
 });
-
-/* const { styleClass } = require('../../../utils');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let rightPaddings = {};
-
-    for (const i in scales) {
-        rightPaddings['pr-' + i] = `${scales[i]}rem`;
-    }
-
-    styleClass('padding-right', rightPaddings, root, opts, true);
-};
- */
diff --git a/components/lib/props/style/padding/properties/top.js b/components/lib/props/style/padding/properties/top.js
index 44a6de088..5a1381670 100644
--- a/components/lib/props/style/padding/properties/top.js
+++ b/components/lib/props/style/padding/properties/top.js
@@ -1,20 +1,6 @@
-import { createRules, token } from '../..';
+import { defineDeclarations, token } from '../..';
 
-export default createRules({
+export default defineDeclarations({
     paddingTop: token.spacing('paddingTop'),
     pt: token.spacing('paddingTop')
 });
-
-/* const { styleClass } = require('../../../utils');
-
-module.exports = (root, opts) => {
-    const scales = opts.spacing;
-    let topPaddings = {};
-
-    for (const i in scales) {
-        topPaddings['pt-' + i] = `${scales[i]}rem`;
-    }
-
-    styleClass('padding-top', topPaddings, root, opts, true);
-};
- */
diff --git a/components/lib/text/BaseText.vue b/components/lib/text/BaseText.vue
index 6a27fbf79..057d2e6b0 100644
--- a/components/lib/text/BaseText.vue
+++ b/components/lib/text/BaseText.vue
@@ -1,10 +1,10 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
 import TextStyle from 'primevue/text/style';
-import { createStyleData } from '../props/style';
+import { useDeclarations } from '../props/style';
 import SPACING from '../props/style/spacing.js';
 
-export const styleData = createStyleData(SPACING);
+export const styleData = useDeclarations(SPACING);
 
 export default {
     name: 'BaseText',
diff --git a/components/lib/text/Text.vue b/components/lib/text/Text.vue
index 315c74772..7deda8713 100755
--- a/components/lib/text/Text.vue
+++ b/components/lib/text/Text.vue
@@ -41,7 +41,7 @@ export default {
     },
     computed: {
         styles() {
-            return styleData.toString(this.$props);
+            return styleData.filterP(this.$props).getStyleDeclarations(this.$config.theme);
         }
     }
 };
diff --git a/doc/panel/BasicDoc.vue b/doc/panel/BasicDoc.vue
index b25dc6e3a..e1edf13c4 100644
--- a/doc/panel/BasicDoc.vue
+++ b/doc/panel/BasicDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <Panel header="Header">
-            <Text px="0">
+            <Text px="0!" p="1px">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </Text>